扩展Vue构造方法

背景

需要通过Vue.extend来挂载实例,并且该实例也需要初始化vuexi18nvue-router等。
为了避免代码的重复性,因此扩展了Vue的构造方法。
主要代码如下:

// BaseVue.js
import Vue from "vue";
import VueI18n from "vue-i18n";

import router from "./router";
import { initStore } from "./store";
import { initStorage } from "./utils/storage";
Vue.use(VueI18n);

export default class BaseVue extends Vue {
    constructor() {
        super();
    }
    static async create(component) {
        const VueChild = super.extend(component);

        const storage = await initStorage();
        const store = await initStore(storage);
        const i18n = BaseVue.initI18n(store);
        await initCacheAndShortcuts(storage);
        return new VueChild({
            i18n,
            store,
            router,
            storage
        });
    }
    static initI18n(store) {
        const i18n = new VueI18n({
            locale: store.state.setting.locale,
            silentTranslationWarn: true
        });
        return i18n;
    }
}

// main.js
import App from "./App.vue";
BaseVue.create(App).then(App => App.$mount('#app'))
// other.js
import MarketComp from "@/views/web/market/component";
BaseVue.create(MarketComp ).then(MarketComp => MarketComp .$mount('#market'))
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angular...
    hcySam阅读 351评论 0 0
  • 此文章仅记录学习Vue中一些平常自己没有去学习到知识,很多东西都是基于自我的认知去写的。文中可能会有理解错误的地方...
    Mstian阅读 862评论 0 10
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,186评论 1 4
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 9,044评论 28 54
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,480评论 4 8

友情链接更多精彩内容