vue项目搭建

一、Node.js安装（Windows）

1.下载对应的node.js版本:https://nodejs.org/en/download/

2.下载完成后，双击安装包，开始安装node.js

3.勾选复选框，点击【Next】按钮

 4.修改好目录后，点击【Next】按钮

 5.此处只需【next】就好

 6.安装完后点击【Finish】按钮完成安装

 验证Node.js是否安装成功
(此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西)

1.打开cmd窗口

 2.输入验证命令（注意：安装node的同时会把npm安装上）

 二.环境配置

这里需要说明的是，默认情况下，如果不配置环境变量，则后面npm安装的一些依赖则会默认安装到C:\Users\baolzhan\AppData\Roaming路径下，也不影响正常使用，但是存储在C盘毕竟影响电脑速度，所以才需要配置环境变量，将这些依赖存储到其他盘；但是如果只有一个C盘，那就没有必要配置环境变量了。

1.查看环境配置：以下截图是npm安装的全局模块所在的路径，以及缓存cache的路径，之后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中。

 

2.打开环境变量

2.1.右击桌面或文件资源管理器左侧的此电脑，选择属性进入系统界面；

2.2.点击高级系统设置，进入系统属性界面；

2.3.点击环境变量，进入环境变量界面；

3.设置环境变量

3.1点击下方系统变量的新建，然后输入变量名NODE_PATH，变量值为node_modules文件的路径，最后点击确定（注意：变量名必须是NODE_PATH!!! node_modules文件在Nodejs安装目录下，这个是安装时自己生成的）；

3.2你可以在环境变量界面看见系统变量多了一条NODE_PATH，然后点击确定，返回系统属性界面；

3.3.再次点击确定，恭喜你环境变量已经配置好了；

2.测试环境变量 

2.1. 配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：

2.2. npm install express -g # -g是全局安装的意思

 如下图安装成功后，说明配置正确

 

三.安装VUE

创建vue项目

1.执行npm install --global vue-cli ，全局安装vue-cli;

2.安装后，检查是否安装成功

vue -V (在此注意V为大写)

3.使用vue建一个项目名叫“my-project”（vue init webpack my-project），注意项目名不能有大写。

4. 注意：

项目建立过程中，有如下选择，选择NO。（该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，避免不必要的麻烦） 

 5.项目建立完成后，目录结构如下：

6.安装项目所需依赖，进入项目中：npm install

完成后，会发现目录下多出一个node_modules文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

1.进入项目目录文件夹（my-project）中，就可以使用vue进行开发；

2.使用npm run dev，便可以打开本地服务器实时查看效果（http://localhost:8080）；

3.初始效果，如右图：