关于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 <project name>来创建项目。
vue serve
Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息
你所需要的仅仅是一个 App.vue 文件：
<template>
<h1>Hello!</h1>
</template>
然后在这个 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 <target> 构建目标 (app | lib | wc | wc-async, 默认值：app)
-n, --name <name> 库的名字或 Web Components 组件的名字 (默认值：入口文件名)
-d, --dest <dir> 输出目录 (默认值：dist)
-h, --help 输出用法信息
你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：vue build MyComponent.vue
vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力。查阅构建目标了解更多。
创建项目
vue init webpack <project name>
cd <project path><project name>
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: '<App/>'
})
-
template:这个是模板文件，官方称为组件，参考官方文件的
生命周期。
- 如果没模板就将el外部的HTML作为模板，这个就是我们正常的html+vue的做法
- 如果有模板就将模板编译到render函数中。这让开发人员，特别那些大前端能更专注工作。
ESLint代码风格报错
对于统一规范很有帮助。
如果安装了又不想用可以这样关闭，版本不同，可能代码的位置和形式不同
