项目地址 vue-cli3-project 欢迎 star
原文地址 https://www.ccode.live/lentoo/list/9?from=art
1. 创建一个vue项目相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。
1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli等待安装完成后开始下一步
1.2 初始化项目 vue create vue-cli3-project选择一个预设
可以选择默认预设，默认预设包含了babel,eslint
我们选择更多功能 Manually select features
回车后来到选择插件
插件选择
这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架）
路由模式选择
是否使用 history模式的路由 （Yes）
选择一个css预处理器 (Sass/SCSS)
选择一个eslint配置
这边选择 ESLint + Standard config，个人比较喜欢这个代码规范
选择什么时候进行 eslint 校验
选择（Lint on save）保存是检查
如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化
选择测试框架 （Mocha + Chai）
选择将这些配置文件写入到什么地方 (In dedicated config files)
是否保存这份预设配置？（y）
选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。
等待依赖完成
在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中导入所有子模块
当我们的业务越来越庞大，每次新增业务模块的时候，我们都要在路由下面新增一个子路由模块，然后在index.js中导入。
那么如何简化这种操作呢？
通过上面的自动扫描全局组件注册，我们也可以实现自动扫描子模块路由并导入
作为前端开发者，放着 node这么好用的东西如果不能运用起来，岂不是很浪费？