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

hot_pot_Leo 發布于2019-08-22 11:11 / 3213人閱讀

摘要：前言最近，為公司開發交付的一個后臺管理系統項目，我使用了框架進行開發實踐。所以，我希望能夠將這些公共的方法，抽離出來放到同一個中，這里就取名。在組件中先引用，再調用公用樣式進行抽離復用建一個公共樣式文件在中進行全局引用，方法同本文，未完待續

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

其實我想要實現是這樣的，感謝 @wow511287680 留言提供的思路：

    // 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"

.
..
...
....

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

GPU云服務器云服務器 vue中調用js vue中 php中如何調用方法 vue 中使用 webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91955.html

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

摘要：前言最近，為公司開發交付的一個后臺管理系統項目，我使用了框架進行開發實踐。所以，我希望能夠將這些公共的方法，抽離出來放到同一個中，這里就取名。在組件中先引用，再調用公用樣式進行抽離復用建一個公共樣式文件在中進行全局引用，方法同本文，未完待續 1、前言最近，為公司開發交付的一個后臺管理系統項目，我使用了 Vue 框架進行開發實踐。模塊化、組件化、工程化的開發...

asce1885 2019-08-29 13:29 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0