初始化一个vue项目

1.安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（需要用管理员权限cmd）。

2.查看node的版本号

下载好node之后（默认安装即可自动配置好环境变量），以管理员身份打开cmd管理工具，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

3.安装淘宝npm镜像

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：

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

4.安装全局vue-cli脚手架

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架.

输入命令：cnpm install --global vue-cli 回车；

验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

5.建一个新项目

搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘，因为vue下载下来的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘

输入命令：vue init webpack my-project-first

回车，my-project-first是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-route，

这个我们在项目要用到，所以就输入y 回车

6.注意

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

打开D盘查看一下，会发现多了一个刚刚创建的文件夹

7.进入项目文件夹

文件夹已经下载好了，现在就可以进入文件夹，输入：cd my-project-first 回车进入新建的项目。

8.在项目里安装依赖

因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，在项目里输入以下命令。

输入命令：npm install

实在安装慢不得已可以使用cnpm install

注意：cnpm 有可能发生未知的错误,请尽量使用：npm install

9.运行

一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况，输入命令：npm run dev直接回车。

会弹出一个浏览器访问地址默认为localhost:8080

注意：run dev只是vue中package.json的打包方式,初始化项目默认是run dev后期打包项目可以自定义设置，run build同理

10.访问验证

8080是默认的端口，要访问的话，直接在浏览器输入localhost:8080就可以打开默认的模板了；到此为止，vue开发环境搭建完毕。

最后如何修改默认的端口？

我们可以看到初始化的根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js,可以修改host和port,这里不仅可以改变ip和端口，还可以根据需要修改其他配置信息。