关于vue命令

在说项目创建前，先说一下这个vue的命令

create 与init命令

这两个命令都用于创建项目,vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

使用create创建的目录要使用npm run server启动本地测试服务
使用init 创建的目录要使用npm run dev启动本地测试服务

由于我们实际工作中是使用了webpack所以我们使用vue init webpack 来创建项目。

vue serve

Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息

你所需要的仅仅是一个 App.vue 文件：

然后在这个 App.vue 文件所在的目录下运行：vue serve
vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：vue serve MyComponent.vue

如果需要，你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。

vue build

Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
-t, --target 构建目标 (app | lib | wc | wc-async, 默认值：app)
-n, --name 库的名字或 Web Components 组件的名字 (默认值：入口文件名)
-d, --dest

输出目录 (默认值：dist)
-h, --help 输出用法信息

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：vue build MyComponent.vue
vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力。查阅构建目标了解更多。

创建项目

vue init webpack

cd 
cnpm insatll
npm run dev

这个过程没什么好说的。就是等，而且本程有都很明确的提示，基本是问答方式全自动的。
? Project name vue-test //项目名
? Project description A Vue.js project //项目描述
? Author Gorgage //作者
? Install vue-router? Yes //是否安装路由，这能单页模拟多页
? Use ESLint to lint your code? Yes //ESLint标准化检测，如果上规范代码就安装这个，如果不想就不要安装了，不然要关闭的话也还得跑到
? Set up unit tests Yes //是否使用单元测试
? Pick a test runner jest //安装了jest
? Setup e2e tests with Nightwatch? Yes 是否使用了自动化测试框架

package.json

这个文件可以看到好多有关npm run 时的一些脚本
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},

从这个json的配置文件可以看出npm run start与npm run dev是一样的。
unit 单元测试，这里使用了Jest进行单元测试
e2e 功能测试，端到端
test 集合了上面两种测试
lint 使用eslint来检查 .js .vue src目录 test/unit目录 test/e2e/specs目录是否合规范。
build 编译打包项目，最后会打包在dist下，然后直接丢到服务器即可。

main.js

开发时需要打开以下选项，能查看日志
Vue.config.productionTip = true
这个main.js是一个入口函数文件。他里面的初始东西不多。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = true

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

template:这个是模板文件，官方称为组件，参考官方文件的
生命周期。
如果没模板就将el外部的HTML作为模板，这个就是我们正常的html+vue的做法
如果有模板就将模板编译到render函数中。这让开发人员，特别那些大前端能更专注工作。

ESLint代码风格报错

对于统一规范很有帮助。
如果安装了又不想用可以这样关闭，版本不同，可能代码的位置和形式不同

02-vue-cli 创建项目