脚手架篇
Vue CLI
官方创建项目的文档
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
安装
npm install @vue/cli -g
# OR
yarn global add @vue/cli
检查其版本
vue --version
快速原型开发
使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发（单独跑一个组件看它的样式和逻辑）
npm install -g @vue/cli-service-global
创建一个项目
命令行方式
vue create hello-world
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
选第二个 手动安装插件（空格可以选择y/n 上下切换选项）
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel //babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router //路由
◉ Vuex //信息存储
◉ CSS Pre-processors //css 压缩
◉ Linter / Formatter //格式校验
◯ Unit Testing
◯ E2E Testing
这里css压缩推荐dart-sass 性能更好
ESLint 推荐Standard config ，代码格式的校验虽然不够严格但是更友好
？Pick additional lint features:** (Press **** to select, **** to toggle all, **
**>** to invert selection) //校验代码的时机？推荐在save的时候校验代码，不然在提交时候才校验可能会有大量报错
❯◉ Lint on save
◯ Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //这些构建文件
❯ In dedicated config files //推荐在单独的configfile 中配置，以免backage.json 过长
In package.json
Save this as a preset for future projects? //是否存储本次创建项目的配置，如果选择y 下次再创建项目的时候则会看到你保存的初始化选项
如果在创建项目时选择了默认模式安装，参考官方文档插件和preset手动增加插件，最好还是一开始就配置好。
Preset
一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。
在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。
vue ui 安装
执行vue ui 可以使用图形界面初始化项目
安装后的配置界面（仪表盘）
http://localhost:8000/dashboard
vue ui
执行vue ui 可以使用图形界面初始化项目
Babel+Router+CSS+Router+Linter
webpack相关
开发中的一些高级配置方法：官方文档。
简单的配置方法可以参考官网配置参考中的内容：
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
几个比较常用的配置：
- baseurl路径的配置（3.0改叫publicpath了）配置开发/正式环境的网站目录https://cli.vuejs.org/zh/config/#publicpath。
- devServer 启动一个代理服务器，防止本地调试的跨端端问题。
- productionSourceMap 设置成false ，生产环境就不会生成sourcemap 加速生产环境的构建。
你可以将其输出重定向到一个文件以便进行查阅：
vue inspect > output.js
Vue 工程目录
- package.json:
管理着项目中的所有的依赖和命令； - babel.config.js:
配置整个项目中的es6的语法，定制化添加babel的属性； - eslintrc.js:
配置许多eslint扩展的语法，和一些基本法则；
