技術標籤：vuejs

vue 高頻元件封裝和使用小技巧

今天分享一個 對於專案中 使用頻率比較高的元件封裝引用的小技巧
大家 都知道在專案中 呼叫元件 有兩種方式
(一) main.js 全域性引用 或者 部分引用
(二) 在使用頁面單獨引用 要先import, 然後在 components 註冊, 最後在template模板中使用
我今天想說的是 第二種在 元件在使用頻率很高的情況下使用 我們可以通過 webpack api的 require.context()方法 把我們常用的元件 統一引到專案中 下面上詳細程式碼
在我專案下 新建幾個頁面

然後新建一個global.js檔案

// 寫一個高頻元件管理的demo
import Vue from 'vue'

// 首字母大寫
function ChangeStr(str) {
    return str.charAt(0).toUpperCase()+str.slice(1);
}

// 用到webpack 的api require.context 引入同級目錄下的元件
// 三個引數 目標路徑   是否包括子集   匹配檔案型別 正則
const requireComponent = require.context('.',false,/\.vue$/);

requireComponent.keys().forEach(filename=>{
    // 獲取當前項
    const config = requireComponent(filename);
    const componentName = ChangeStr(filename.replace(/^\.\//,'').replace(/\.\w+$/, ''));
    Vue.component(componentName,config.default || config);
});

 

引入完成之後 在我們的main.js檔案中 引入global.js

這麼做的好處是 把常用元件全域性自動引入到main.js中,不用每個頁面單獨在引元件
缺點是 減慢載入速度 所以不要什麼都引進來