vue-cli 创建项目

用vue-cli脚手架构建项目总体分为5步：

　　1、在所要创建VUE项目的文件夹中右击，在命令行中打开

　　2、在命令行中输入：npm install -global vue-cli   下载vue脚手架　

　　3、vue init webpack test 生成项目，形成基本架构（注意：ESLint）

　　4、npm install 依赖包

　　5、npm run dev

说明：

 

　　“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

 

　　“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

 

　　“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置

 

　　“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦

 

　　“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”

 

　　这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

 

配图：

 

生成好的目录：

在浏览器中输入：https://localhost:8080

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

“assets”: 共用的样式、图片

“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

“router”: 设置路由

“App.vue”: vue文件入口界面

“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

package.json:

这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是
npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

补充：

ESLint：ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

因为检测语法严格，空格必须按照要求输入，否则报错。