Vue项目中的代码优化层面

2022年05月15日 阅读数:4
这篇文章主要向大家介绍Vue项目中的代码优化层面,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

  • 场景:之前咱们每一个页面须要引入组件时,都是在script内部进行import形式引入,但随着项目的扩大和业务场景的复杂度变化,组件的产生也随着愈来愈多,所以优化步骤以下。git

  • 之前的版本是这样的:github

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

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

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

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

第二部分 是针对路由的引入作优化.net

  • 场景:此前咱们引入路由时都是在router这个文件夹内统一操做,并且不管是多少都是在index内叠加,可是有种状况是,项目愈来愈大,复杂度高,需求也多了,对于不一样的模块和权限有这不一样的设置,此时就须要多模块导入的优化,比较简单,请看。3d

  • 之前的版本是这样的:调试

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

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

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

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

  • 场景:你们都知道Vuex是vue内的一个状态管理库,不少项目中都是必不可少的须要使用到它,但有时呢,项目这块它并非很大,本身平时的一些传值也能知足,就是多传几回吧,也蛮累的,因而优化来了,见下图。

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

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


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