最近研究前辈代码,发现他们 使用Vue插件plugins为 Vue 添加全局功能 ,感觉很实用的方法
比如,我们经常会在 min.js中添加 directives, filters, mixin, Vue.prototype.XX 这些API方法,常常会使得 main.js 冗余,难看
使用 Vue 的 插件plugins,专门建一个文件来处理这些方法, 再引入 main.js 中,使得页面简洁又具有模块化
1.在 plugins/index.ts 中
1 // 插件类型 2 import { PluginObject } from 'vue'; 3 4 // 全局资源 5 import statics from './statics'; //静态属性/方法 6 import directives from './directives'; // 自定义指令 7 import instances from './instances'; //实例属性/方法 8 import filters from './filters'; //实例属性/方法 9 import mixins from './mixins'; // 混入 10 import { $Http } from './mixins/provides/service'; // 混入 11 12 export const plugins: PluginObject<any> = { 13 install(Vue, options) { 14 // 静态属性/方法 15 Object.assign(Vue, statics); 16 17 // 实例属性/方法 18 // Object.assign(Vue.prototype, instances); 19 20 // 自定义指令 21 Object.keys(directives).forEach((key: string) => { 22 Vue.directive(key, directives[key]); 23 24 }); 25 26 // 自定义过滤器 27 Object.keys(filters).forEach((key: string) => { 28 Vue.filter(key, filters[key]); 29 }); 30 31 //请求的方法提出来了 32 Vue.prototype.$Http = $Http; 33 34 // 混入 35 Vue.mixin({ 36 ...mixins, 37 }); 38 }, 39 };
2.在 main.js 中
1 import { plugins } from '@/plugins'; // 引入全局插件 2 Vue.use(plugins);
分享一刻: