vue工程搭建

一 下载node.js 配置 nmp

1. 下载node.js

   下载地址：http://nodejs.cn/download/

2. 查看环境变量和版本

3. 设置npm 的本地仓库路径到 D:/nodejs下

   1. 在D:/nodejs下创建node_global 和 node_cache 两个文件夹。

   2. 然后执行如下命令：

   npm config set prefix “D:\nodejs\node_global”

   npm config set prefix “D:\nodejs\ node_cache”

4. 配置淘宝镜像

   1. 配置淘宝镜像 （因为公认淘宝的镜像速度比较快）

   2. 查看配置信息 命令： npm config list

   看我们修改的库文件 和镜像地址是否生效了~~

5. 公司内部无法使用淘宝镜像重新配置

6. 确认镜像可以使用

   输入 npm info vue 如果镜像无法使用会报错

   

7. 重新安装最新版本npm

   1. 更新最新的npm版本 通过 npm install npm -g 进行全局安装

   PS： 全局安装及安装到刚才指定的D:\nodejs\node_global 文件夹中

   2. 此时我们会发现，在D:\nodejs\node_global 中也出现了一个node_modules的文件夹，里面安装好了最新的nmp。与D:\nodejs\node_modules相同。

   之后我们通过nmp安装的全局modeules都会放在D:\nodejs\node_global \node_modules中

至此， npm的安装和配置已经完成。下面继续介绍vue相关的安装和配置

---

二 vue、vue-cli的安装

1. 全局安装vue、vue路由、 vue脚手架

   通过 nmp命令进行全局安装

   1. nmp install vue -g

   2. nmp install vue-router -g

   3. nmp install vue-cli -g

   

2. 添加vue的环境变量

   上图显示 输入 vue显示不是内外部命令，需要添加环境变量

   1. 将 ;D:\nodejs\node_global 加入到环境变量中

   
   PS: 如果加入环境变量后，cmd中执行 vue-V 依然显示vue不是内外部命令

   1. 在cmd中执行 echo %PATH% 查看添加的D:\nodejs\node_global是否在其中，如果没有证明添加的变量没有生效。重启电脑，重新通过echo %PATH%查看环境变量

   2. 执行 vue -V （注意大写的V）显示如下图片即可

      

---

三 通过vue-cli 创建工程

1. 安装vue-cli

   通过 npm install -g @vue/cli 下载vue-cli

2. 创建工程

   vue create data_center (工程名)

   按照如下的步骤进行选择配置

   

下面是一些配置的选项。可以自行百度选择。

3. 创建工程的目录如下