Vue项目中的代码优化层面

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

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

以前的版本是这样的:

在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

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

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

以前的版本是这样的:

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

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

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

在这里插入图片描述

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

在这里插入图片描述

这时你是不是想问,行不行还不知道呢 走起!

在这里插入图片描述

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

猜你喜欢

转载自blog.csdn.net/qq_39221436/article/details/124625067