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样式处理最佳实践