通过vue ui 、vue create以及webpack来初始化项目
在需要工作的文件夹路径下输入cmd进入命令指示符

1、 node安装

（1）检查node是否安装

（2）如果没有安装就需要去node官网下载4.0以上的版本

2、检查npm版本

3、检查 cnpm版本

4、检查vuecli版本

没有vuecli，输入命令cnpm install @vue/cli -g全局安装

vue安装完成

5、项目的创建

方法一：

（1）创建,终端输入vue ui

（2）预设

（3）功能

（4）配置

（5）创建成功

方法二：

（1）vue create初始化项目，项目名称自己定

（2）选择预设，用方向键来选择

（3）键盘上下键选择, 选择自己需要的特性（上下键移动键，空格键是否选中，a 键切换选择所有，i 键反转选择选项）

（4）选择vue的版本

（5）选择路由与预选择器

（6）所有的特性配置项，生成一个配置文件

（7）出现如下所示界面，说明项目初始化构建成功。使用下面的命令，启动项目！

1、通过cd 命令进入项目中！

2、然后通过npm run serve命令，启动项目！

通过如下地址，去访问项目

方法三：通过webpack构建vue初始化项目

一、安装node

二、安装vue脚手架构建工具，命令行输入 npm install –g @ vue/cli

三、安装webpack

通过npm或cnpm安装webpack模块化打包工具

npm install webpack –g或cnpm install webpack –g

#四、vue-cli初始化webpack项目

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

执行命令：vue init webpack wd，建立项目。

其中wangjie使我们要建立的项目名称，当脚本执行时，会继续进行确认。

安装依赖，如下所示：

Project name wangjie填写你定义的项目名称

Project description xiaowang填写对项目的描述

Author填写作者名

Vue build standalone

Install vue-router? Yes是否安装vue-router

Use ESLint to lint your code? No 是否用ESLint

Set up unit tests No 是否建立Unit单元测试

Setup e2e tests with Nightwatch? No 是否E2E黑盒测试

Should we run npm install for you after the project has been created? (recommended) npm是否

说明：

ESLint的作用是检查代码错误和统一代码风格的。确认添加ESLint后，在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。

eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。

eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。

Mocha是一个测试框架，在vue-cli中实现单元测试。

五、启动项目

执行初始化项目以后，下面会有对应的命令：

已经初始化了项目，并且在 package.json 里面已经有相关配置，所以在这里可以直接安装；

安装完成之后再执行命令： npm run dev

整个项目就已经启动了：

npm run dev 运行

npm run build 打包