前端框架Vue（九）——如何在vue中管理单个文件中的公共css和js方法，并全局调用

一、前言最近使用Vue框架开发交付了一个后台管理系统项目为公司发展实践。模块化、组件化、工程化的开发经验非常好。良好的api，优雅的设计，对工程师非常友好。但是因为模块比较多，所以我给每个模块分配了不同的组件，发现一个项目中有很多相同的方法，需要在每个组件中重复写。因此，我希望能够将这些公共方法抽离出来，放在同一个js中，这里命名为util.js。2.模型设计3.实现方法1.方法1在组件中直接引用暴露接口的方法。首先，将两个方法写在一个单独的util.js:组件中引用的文件中。经测试，在main.js中不能全局使用参考（有方法请告诉我）：import{a,b}from'../static/js/util.js'call:test:function(){A（）;b();}2.方法二：将public方法集成到vue原型中，vue.prototype.name先把方法写在util.js中：在main.js中做一个全局引用：调用：this.adminApi.a();this.adminApi.b();其实我想实现的是这样的，感谢@wow511287680留言提供的思??路：//utils.jsletutils={toPath(name){location.href='/#/'+名称；}};export{utils}xxx.vue从'@/js/utils'导入{utils};这样不同的对象有不同的方法，层次更清晰，可维护性提高更高。先在组件中引用，然后调用：import{obj,obj1}from'../../static/js/utils'obj.fun1();obj1.fun1();4.CSS公共样式的提取和复制创建一个公共样式css文件：在main.js中全局引用，方法同js：import'./static/css/common.css'......……本文，未完待续……..