VUE项目的创建（node.js的安装以及环境变量配置再到VUE项目的创建）----------前端

VUE项目的创建（node.js的安装以及环境变量配置再到VUE项目的创建）

一、node.js的安装

1.node.js的下载

因为需要使用 npm 安装 Vue cli，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。


根据自己的电脑系统情况选择对应的下载。

2.node.js的安装

2.1 打开安装程序如下图，点击下一步

2.2 ，选择需要安装的文件目录，再next，点击 next,就是这个界面。

同样也是下一步。就一直下一步。直到安装完成。（里面应该不重要的，我们快进）。

二、node.js的环境配置

2.1环境变量配置

打开环境变量配置：
path里面选择新增，将自己node.js的安装路径填进去，点击确定。如下图：

配完node.js的环境变量就可以。

2.2验证是否安装成功

打开安装了node.js的盘符下的命令操作板
执行：node -v 如下图，显示版本

再执行：npm -v 如下图

到这里我们的node.js的安装配置就完成了。

2.3安装 cnpm，以及环境配置

选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为 ：

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

完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。
环境变量的配置：

如上图配完环境变量后我们输入cnpm -v 进行验证，结果如下图说明安装完成。

全局安装VUE: 执行语句cnpm install vue-cli -g 如下图，说明正在安装。

检查：执行语句vue -V ，结果如下图，说明全局VUE安装成功了。

三、VUE项目的创建以及启动

3.1创建VUE项目

创建一个新的项目文件夹然后在命令执行板输入：vue init webpack 项目名称

然后就是下面界面，前面几个选项回车就好。到下图

这一步开始选择No就好。一直到结束。

到这里，我们的项目就创建完成了。
下面我们还需要两个命令去启动我们的项目：

npm install

这里我用cnpm install的时候报错，好像是有些包装不上，我换成npm install，就可以了。

接下里就是启动项目：
执行命令：npm run dev 结果如下:

这个时候我们的项目就启动了。
打开浏览器访问http://localhost:8080 结果如下

如何停止服务呢？
Ctrl+c 后出现下面操作提示，然后Y同意就停止了服务。

这个时候我们就完成了vue项目的创建，打开你的idea去开发吧。