前端框架Vue（9）——vue 中如何對公共css、 js 方法進行單文件統一管理，全局調用

一、前言

最近，爲公司開發交付的一個後臺管理系統項目，我使用了 Vue 框架進行開發實踐。
    
    模塊化、組件化、工程化的開發體驗很是好。良好的 api，優雅的設計，對於工程師很是友好。

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

    因此，我但願可以將這些公共的方法，抽離出來放到同一個 js 中，這裏就取名 util.js。

二、模型設計

三、實現方法

一、方法一

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

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

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

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

調用：

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

二、方法二：

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

首先在 util.js 中寫方法：

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

調用：

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

其實我想要實現是這樣的，感謝 <font color=red size=3>@wow511287680 </font> 留言提供的思路：

// 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();

四、CSS 公用樣式進行抽離複用

建一個公共樣式 css 文件：

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

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

.
..
...
....

本文，未完待續 ... ...