1. 创建一个vue项目
相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。
1.1 安装@vue/cli
# 全局安装 vue-cli脚手架 npm install -g @vue/cli
等待安装完成后开始下一步
1.2 初始化项目
vue create vue-cli3-project
(1)选择一个预设
可以选择默认预设，默认预设包含了 babel , eslint
我们选择更多功能 Manually select features
回车后来到选择插件
(2)插件选择
这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架）
(3)路由模式选择
是否使用 history 模式的路由 （Yes）
(4)选择一个css预处理器 (Sass/SCSS)
(5)选择一个eslint配置
这边选择 ESLint + Standard config ，个人比较喜欢这个代码规范
(6)选择什么时候进行 eslint 校验
选择（Lint on save）保存是检查
如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化
7. 选择测试框架 （Mocha + Chai）
8. 选择将这些配置文件写入到什么地方 (In dedicated config files)
9. 是否保存这份预设配置？（y）
选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。
等待依赖完成
2. 全局组件自动注册
在 components 目录下创建一个 global 目录，里面放置一些需要全局注册的组件。
index.js 作用只要是引入 main.vue ，导出组件对象
在 components 中创建一个 index.js，用来扫描全局对象并自动注册。
// components/index.js import Vue from 'vue' // 自动加载 global 目录下的 .js 结尾的文件 const componentsContext = require.context('./global', true, /\.js$/) componentsContext.keys().forEach(component => { const componentConfig = componentsContext(component) /** * 兼容 import export 和 require module.export 两种规范 */ const ctrl = componentConfig.default || componentConfig Vue.component(ctrl.name, ctrl) })
最后在入口文件 main.js 中导入这个 index.js 中就可以了
3.路由自动引入
在 Vue 项目中使用路由，相信想熟的人已经很熟悉怎么使用了，要新增一个页面的话，需要到路由配置中配置该页面的信息。
如果页面越来越多的话，那么如何让我们的路由更简洁呢？
3.1 拆分路由
根据不同的业务模块进行拆分路由
在每个子模块中导出一个路由配置数组
在根 index.js 中导入所有子模块
3.2 自动扫描子模块路由并导入
当我们的业务越来越庞大，每次新增业务模块的时候，我们都要在路由下面新增一个子路由模块，然后在 index.js 中导入。
那么如何简化这种操作呢？
通过上面的自动扫描全局组件注册，我们也可以实现自动扫描子模块路由并导入
4. 通过node来生成组件
作为前端开发者，放着 node 这么好用的东西如果不能运用起来，岂不是很浪费？
