Vue项目中的代码优化层面

第一部分 是针对组件的引入做优化

• 场景：以前我们每个页面需要引入组件时，都是在script内部进行import形式引入，但随着项目的扩大和业务场景的复杂度变化，组件的产生也随着越来越多，因此优化步骤如下。
• 以前的版本是这样的：

这些还是比较基础的，后面越多的组件引入看起来就不是很友好，于是请看下面的优化

• 在文件内新建utils.js文件，名字可以自定义，位置也可以自定义，写入以下图片中标识的内容，并在main.js内导入即可

到了这一步了，已经完成90%了，那么最后一步就是调试啦，看看是不是果真如此，见真章！

好了，大功告成，关于组件的优化就到此为止，这个还是蛮实用的。

第二部分 是针对路由的引入做优化

• 场景：此前我们引入路由时都是在router这个文件夹内统一操作，而且不论是多少都是在index内叠加，但是有种情况是，项目越来越大，复杂度高，需求也多了，对于不同的模块和权限有这不同的设置，此时就需要多模块导入的优化，比较简单，请看。
• 以前的版本是这样的：

这几个方式也是目前主流的几种，也是可以的。就今天想说的是分模块的多文件统一引入模式，请看下方的优化

同样的 到了这一步 我怎么知道行不行呢，请看大截图显示

对此呢，关于路由的优化 就这些，还会继续学习和补充的。

第三部分 是针对Vuex使用层的优化

• 场景：大家都知道Vuex是vue内的一个状态管理库，很多项目中都是必不可少的需要使用到它，但有时呢，项目这块它并不是很大，自己平时的一些传值也能满足，就是多传几次吧，也蛮累的，于是优化来了，见下图。

到了这一步了，那就基本的地基搭好了，那么我们到组件内使用看看吧

这时你是不是想问，行不行还不知道呢 走起！

附件地址：http://github.crmeb.net/u/defu