vue + ts + plugins 添加全局功能

 

最近研究前輩代碼,發現他們 使用Vue插件plugins為 Vue 添加全局功能 ,感覺很實用的方法

比如,我們經常會在 min.js中添加 directives, filters, mixin, Vue.prototype.XX 這些API方法,常常會使得 main.js 冗余,難看

使用 Vue 的 插件plugins,專門建一個文件來處理這些方法, 再引入 main.js 中,使得頁面簡潔又具有模塊化

 

1.在 plugins/index.ts 中

// 插件類型
import { PluginObject } from 'vue';

// 全局資源
import statics from './statics'; //靜態屬性/方法
import directives from './directives'; // 自定義指令
import instances from './instances'; //實例屬性/方法
import filters from './filters'; //實例屬性/方法
import mixins from './mixins'; // 混入
import { $Http } from './mixins/provides/service'; // 混入

export const plugins: PluginObject<any> = {
  install(Vue, options) {
    // 靜態屬性/方法
    Object.assign(Vue, statics);

    // 實例屬性/方法
    // Object.assign(Vue.prototype, instances);

    // 自定義指令
    Object.keys(directives).forEach((key: string) => {
      Vue.directive(key, directives[key]);
     
    });

    // 自定義過濾器
    Object.keys(filters).forEach((key: string) => {
      Vue.filter(key, filters[key]);
    });

    //請求的方法提出來了
    Vue.prototype.$Http = $Http;

    // 混入
    Vue.mixin({
      ...mixins,
    });
  },
};

 

2.在 main.js 中

  import { plugins } from '@/plugins'; // 引入全局插件
  Vue.use(plugins);

 

分享一刻:

圖片加載失敗后CSS樣式處理最佳實踐