vue学习笔记 一、环境搭建

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

操作系统：win10 64位

 

一、下载安装node.js 相当于java开的的jdk

下载地址：https://nodejs.org/zh-cn/ 

发现之前的下载地址居然没有了，这是新的下载地址：https://nodejs.org/en/download

查看版本

D:\>node -v

v14.17.5

 

安装路径：D:\soft\nodejs

还会自动在： C:\Users\yc\AppData\Roaming\npm\node_modules\nrm

注：如上两个是我的路径，实际路径会不同。

 

二、安装cnpm和VUE

 

D:\>cnpm install nrm -g

 

D:\>nrm ls

internal/validators.js:124

    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);

      

报错解决办法：https://blog.csdn.net/a806488840/article/details/113869522

 

D:\>nrm ls

 

* npm -------- https://registry.npmjs.org/

  yarn ------- https://registry.yarnpkg.com/

  cnpm ------- http://r.cnpmjs.org/

  taobao ----- https://registry.npm.taobao.org/

  nj --------- https://registry.nodejitsu.com/

  npmMirror -- https://skimdb.npmjs.com/registry/

  edunpm ----- http://registry.enpmjs.org/

 

选择淘宝为源

D:\>nrm use taobao

 

 

   Registry has been set to: https://registry.npm.taobao.org/

  

D:\>npm install -g @vue/cli

.......

 

看到如下，环境安装成功

D:\>vue --version

@vue/cli 4.5.13

 

安装 Express

$ cnpm install express --save  这是安装到当前目录

cnpm install express -g   全局安装

 

$ cnpm install body-parser -g

$ cnpm install cookie-parser -g

$ cnpm install multer -g

 

--查看安装的情况要切换目录

C:\Windows\System32>cd  C:\Users\yc\AppData\Roaming\npm\node_modules

C:\Users\yc\AppData\Roaming\npm\node_modules>cnpm list express

C:\Users\yc\AppData\Roaming\npm

`-- express@4.17.1

 

三、打开图形化界面

C:\Windows\system32>cd  C:\Users\yc\AppData\Roaming\npm\node_modules\@vue\cli

 

C:\Users\yc\AppData\Roaming\npm\node_modules\@vue\cli>vue -V

@vue/cli 4.5.13

 

C:\Users\yc\AppData\Roaming\npm\node_modules\@vue\cli>vue ui

??  Starting GUI...

??  Ready on http://localhost:8000

 

浏览器输入http://localhost:8000出现如下界面则启动成功