创建一个vue-cli项

一、vue cli脚手架

Vue 提供了一个官方的cli，为单页面应用 (SPA) 快速搭建繁杂的脚手架，通过这个工具我们就可以很方便的来创建一个基于vue的项目。

二、安装一些必要的东西node、npm、webpack、vue-cli

在用 Vue 构建大型应用时推荐使用 NPM 安装，基于node.JS，NPM 能很好地和诸如webpack或browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

1、安装node.js；从nodejs官网下载并安装node，安装完成后，在命令行里输入node -v或node --version 查看是否安装成功。安装成功后，会出现相应的版本号，如下图。

2、安装npm；在命令行里输入npm install -g 或者使用cnpm利用淘宝镜像会更快。同样输入npm -v 查看是否成功。

3、安装webpack；在命令行里输入：npm install webpack -g，安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。

4、安装vue-cli；在命令行里输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

三、创建项目

vue init webpack xxxxx（注意：起的名字符合package.json中name命名规则，不要出现大写字母，中文，空格，下划线，可以使用-） 基于webpack来构建一个名称为xxxxx的vue项目

 

下一步

Project Name：xxxxx    要创建的项目名称（默认为当前创建的项目目录名称，也可以重新命名，但是同样需要符合规则）

Project Description：项目简介，可选填

Author：项目作者，可选填

Vue build :

Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any Ｖue-specific HTML) are ONLY allowed in vue files-render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users;显示的便是standalone。

大致原因见文章《使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别》

Install vue-router：是否安装vue路由组件，如果在这里没选择，后面可以自行添加，

Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测（这个东西，刚开始我一直没安装过，后来项目用过以后，觉得很好用，不用反而不习惯代码不规范了。建议使用）

Setup unit tests ：是否安装测试（单元测试）

Setup e2e tests with Nightwatch?：是否安装端到端的测试

 四、运行项目

　　（１）npm报错 “This is probably not a problem with npm,there is likely additional logging output above”，在新建完项目后没有node_modules文件目录，

原因可能是我新建项目选择了“npm install”，但是一直卡在那不动，实在太慢了，我就手动结束了，后续使用cnpm install将node_modules装上了。

 后来再新建项目时，可以直接不选择　“npm或者yarn”，后续自己手动install。