从零开始创建VUE项目

一、安装配置node.js   http://nodejs.cn/download/

1、首先配置npm的全局模块的存放路径、cache的路径，此处选择放在：D:\Program Files\nodejs

输入如下命令：

npm config set prefix "E:\Nodejs\node_global"
npm config set cache "E:\Nodejs\node_cache"

 

2、在系统环境变量添加NODE_PATH,输入路径为：E:\Nodejs\node_global

操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径，确定即可。

 

3、在命令行输入以下命令安装express（注：“-g”表示安装到global目录下，就是上面设置的node_global中）

npm install express -g

可以看到node_global/node_modules下有express了

 

二、安装cnpm

1、安装cnpm，输入以下命令：

npm install -g cnpm --registry=https://r.npm.taobao.org

2、输入cnpm -v ，检测是否正常，但是这里会报错。

3、添加系统变量path的内容

因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

然后再次输入cnpm -v 确认安装成功。

 

三、创建VUE项目

1.全局安装vue-cli

$ cnpm install -g webpack
$ cnpm install -g vue-cli

　　

2.创建一个基于webpack模板的新项目

$ vue init webpack my-project

注：会出现ChromeDriver下载停滞，需要先使用cnpm安装ChromeDriver

可以 

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

或者

 $ cnpm install -g chromedriver

 

3.安装依赖及运行

$ cd my-project
$ cnpm install
$ npm run dev

　　

四、ElementUI，一套基于 Vue 2.0 的桌面端组件库    https://element.eleme.cn/#/zh-CN

1.安装

$ npm i element-ui -S

　　

2.需要重新执行以下指令

$ cnpm install
$ npm run dev