一 下载node.js 配置 nmp
-
下载node.js
image.png
- 查看环境变量和版本
image.png
-
设置npm 的本地仓库路径到 D:/nodejs下
- 在D:/nodejs下创建node_global 和 node_cache 两个文件夹。
- 然后执行如下命令：
npm config set prefix "D:\nodejs\node_global"
npm config set prefix "D:\nodejs\ node_cache"
image.png
-
配置淘宝镜像
- 配置淘宝镜像 （因为公认淘宝的镜像速度比较快）
- 查看配置信息 命令： npm config list
看我们修改的库文件 和镜像地址是否生效了~~
image.png
- 公司内部无法使用淘宝镜像重新配置
-
确认镜像可以使用
输入 npm info vue 如果镜像无法使用会报错
image.png
-
重新安装最新版本npm
- 更新最新的npm版本 通过 npm install npm -g 进行全局安装
PS： 全局安装及安装到刚才指定的D:\nodejs\node_global 文件夹中
- 此时我们会发现，在D:\nodejs\node_global 中也出现了一个node_modules的文件夹，里面安装好了最新的nmp。与D:\nodejs\node_modules相同。
之后我们通过nmp安装的全局modeules都会放在D:\nodejs\node_global \node_modules中
image.png
至此， npm的安装和配置已经完成。下面继续介绍vue相关的安装和配置
二 vue、vue-cli的安装
-
全局安装vue、vue路由、 vue脚手架
通过 nmp命令进行全局安装
- nmp install vue -g
- nmp install vue-router -g
- nmp install vue-cli -g
image.png
-
添加vue的环境变量
上图显示 输入 vue显示不是内外部命令，需要添加环境变量
- 将 ;D:\nodejs\node_global 加入到环境变量中
image.png
PS: 如果加入环境变量后，cmd中执行 vue-V 依然显示vue不是内外部命令
在cmd中执行 echo %PATH% 查看添加的D:\nodejs\node_global是否在其中，如果没有证明添加的变量没有生效。重启电脑，重新通过echo %PATH%查看环境变量
-
执行 vue -V （注意大写的V）显示如下图片即可
image.png
三 通过vue-cli 创建工程
-
安装vue-cli
通过 npm install -g @vue/cli 下载vue-cli
-
创建工程
vue create data_center (工程名)
按照如下的步骤进行选择配置
image.png
下面是一些配置的选项。可以自行百度选择。
-
创建工程的目录如下
image.png
