vue项目的创建与配置

安装node

1、下载相应的nodejs：https://nodejs.org/zh-cn/download/
2、下载完成后进行安装，一直点击next即可
3、检查是否安装成功：进入cmd，输入node -v

如果输入命令后显示有版本号即为安装成功

npm 环境配置

1、配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，即在cmd中输入下面两条命令（后面的路径为自己的nodejs的安装路径即可）：
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

2、环境变量的配置：
执行：“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

这里改成自己的node_global路径。

3、配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，输入如下命令进行模块的全局安装：
npm install express -g （-g为全局安装）

我这里因为之间安装过，所以只进行了包的更新
安装完成后，可以在自己的nodejs 目录下看到对应的文件夹

4、一般为了提高node的速率我们会安装一个淘宝镜像，就可以采用cnpm install 来代替npm安装 。在cmd中输入：npm install -g cnpm –registry=https://registry.npm.taobao.org 命令即可

搭建vue项目

全局安装 vue cli，vue cli 是一个脚手架工具，用于生成一个基础的vue应用。
运行:npm install vue-cli -g
这里我使用的软件是hbuilder，所以我将使用hbuilder创建与配置vue
1、文件—>新建—>项目，选择vue项目，输入项目名称，选择路径，点击确定，等待模板下载。

2、进入项目所在文件夹，安装vue项目所需要的依赖包，在项目对应的命令行窗口输入：npm install --registry=https://registry.npm.taobao.org

3、运行：npm run dev或者cnpm run dev将项目跑起来，发现报错，这是因为在package.json中丢失了dev。这个时候只需通过"vue init webpack -g" 把丢失的dev下载过来，若遇下载缓慢，则执行cpnm install --save-dev webpack


这里等的时间或许会有点长

上面的cmd命令执行完成后会发现你创建的Vue项目中多了一些文件或包，都这里也就完成了一个基础vue文件的创建与配置。

最后，如果要写一个完整的vue项目一般需要安装相关的依赖，所以这里在提一下利用npm安装依赖的方法如下：
npm install xxx：安装依赖到项目目录下，不会将模块依赖写入devDependencies或dependencies。
npm install xxx -g：将依赖安装到全局，具体安装到哪个磁盘位置，主要是看npm cinfig prefix的位置。
npm install xxx -save：安装依赖到项目目录下，并在package文件的dependencies节点写入依赖。
npm install xxx -save-dev：安装依赖到项目目录下，并在package文件的devDependencies节点写入依赖。

安装完成后如果要看是否在对应的位置显示，可以在上图所示的文件中查看。