vue 中如何對公共css、 js 方法進行單文件統一管理，全局調用

1、前言

最近，為公司開發交付的一個后台管理系統項目，我使用了 Vue 框架進行開發實踐。

模塊化、組件化、工程化的開發體驗非常好。良好的 api，優雅的設計，對於工程師非常友好。

但是由於模塊比較多，我對於每個模塊分配了不同的組件，發現一個項目中有許多相同的方法，在每個組件中我都需要進行重復的編寫。

所以，我希望能夠將這些公共的方法，抽離出來放到同一個 js 中，這里就取名 util.js。

2、模型設計

3、實現方法

1、方法一

暴露接口的方式，直接在組件中進行引用

首先在 util.js 單獨文件中寫兩個方法：

　　

 在組件中引用，測試了無法在 main.js 中全局引用（有方法請告訴我）：

import {a,b} from '../static/js/util.js'

調用：

test: function() {
        a();
        b();
}

2、方法二：

將公共方法集成到 Vue 原型上，Vue.prototype.name

首先在 util.js 中寫方法：

在 main.js 中進行全局引用：

調用：

this.adminApi.a();
this.adminApi.b();

其實我想要實現是這樣的:

  // utils.js  
    let utils = {  
        toPath (name) {  
            location.href = '/#/' + name;  
        }  
    };  

    export {  
        utils  
    }  

    // xxx.vue  
    import {utils} from '@/js/utils';

這樣，不同對象中分別有不同的方法，分層更加的清晰，可維護性也更高。

 

在組件中先引用，再調用：

import {obj, obj1} from '../../static/js/utils'

 

obj.fun1();
obj1.fun1();

4、CSS 公用樣式進行抽離復用

建一個公共樣式 css 文件：

在 main.js 中進行全局引用，方法同 js：

import './static/css/common.css'