如何基于Vue.js开发集成store、router的可复用组件库？

问题原因 #

• 组件库路由注册API使用错误：registerModule是Vuex的专属方法，Vue Router不存在该API，调用不存在的方法会直接抛出JS异常，阻塞页面整个渲染流程
• 插件传参缺失：组件库的install方法中需要读取options.route（实际应为router），但你调用Vue.use时仅传入了store，未传入router实例，读取undefined的方法直接触发报错
• 插件重复注册：组件库默认导出的是完整插件，调用一次Vue.use就会自动注册所有5个全局组件、绑定Vuex模块和路由，你重复导入单个组件并多次调用Vue.use，会导致Vuex模块重复注册、逻辑冲突

解决步骤 #

第一步：修改组件库导出代码

修正路由注册逻辑、增加重复注册校验、调整参数校验规则：

import LoadingSpinner from './components/common/LodingSpinner.vue';
import Modal from './components/common/Modal.vue';
import InputPage from './components/InputPage.vue';
import Page from './components/Page.vue';
import ProcessingPage from './components/ProcessingPage.vue';

import store from './store/index.js';
import routes from './routes/index.js'; // 此处为你的路由配置数组

export default {
  install(Vue, options) {
    // 补全参数校验
    if (!options || !options.store || !options.router) {
      throw new Error('Please initialise plugin with a Vuex store and Vue Router instance.')
    }

    // 避免Vuex模块重复注册
    if (!options.store.hasModule('dummylib')) {
      options.store.registerModule('dummylib', store);
    }
    
    // 替换为正确的路由注册方法，Vue2用addRoutes，Vue3可遍历routes调用addRoute
    options.router.addRoutes(routes);

    // 避免组件重复注册
    if (!Vue.component('loading-spinner')) {
      Vue.component('loading-spinner', LoadingSpinner);
      Vue.component('modal', Modal);
      Vue.component('input-page', InputPage);
      Vue.component('page', Page);
      Vue.component('processing-page', ProcessingPage);
    }
  }
}

// 可选：导出单个组件支持按需引入
export {
  LoadingSpinner,
  Modal,
  InputPage,
  Page,
  ProcessingPage
}

第二步：修改新项目main.js代码

删除冗余的重复导入和注册逻辑，调用插件时补全router参数：

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import DummyLib from 'dummylib';
import router from './routes';

Vue.config.productionTip = false
// 仅需调用一次插件，同时传入store和router
Vue.use(DummyLib, { store, router });

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

可选：按需引入组件说明 #

如果不需要全局注册所有组件，可单独导入单个组件在业务页局部注册即可，无需调用Vue.use：

// 业务页面代码示例
import { Modal } from 'dummylib'
export default {
  components: {
    Modal
  }
}

内容的提问来源于stack exchange，提问作者Ghunhee Shin