在一个自定义 npm 包中导出 Vue 和 Vuex

Question

我正在尝试将 Vue/Vuex 项目分解为私有托管的 npm 包。我想我到了那里，但是我不确定我目前的布局，到目前为止我有：

src/
├── BrokerProposal
│   ├── FormInputs
│   ├── index.js
│   └── modals
└── store
    ├── index.js
    └── modules
        └── proposal
            ├── actions
            ├── getters
            ├── helpers
            ├── mutations
            └── states
                └── validations

我的目标是使 BrokerProposal 目录可导入，这是通过第一个 index.js 文件完成的：

const BrokerProposal = require('./BrokerCalculator.vue');

function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component("v-broker-proposal", BrokerProposal);
  }
  
const plugin = {
    install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
    GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
    GlobalVue = global.vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin);
}

BrokerProposal.install = install;

export default BrokerProposal;

这个项目也使用了vuex，所以我把state的mutators等分解到这个包中来配合BrokerProposal，最终用户可以在导入后绑定这个store，这里是index.js文件：

import Vue from 'vue'
import Vuex from 'vuex'

// Vuex Modules
import tabs from './modules/tabs'
import proposal from './modules/proposal'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    tabs,
    proposal,
  },
})

export default store

我觉得我应该在与/src 相同级别包含另一个 index.js 文件，因为 package.json 文件中有一个“main”部分必须指向某些东西？

Answer 1

应该避免像Vue.use(Vuex) 和GlobalVue.use(plugin) 这样的副作用，因为它们可能会干扰使用这个包的项目。使用适当的 Vue 实例设置插件是项目的责任。

所有公共出口都可以在入口点命名为出口，例如src/index.js:

export { default as BrokerProposal } from './BrokerProposal';
export { default as store } from './store';

导出组件也是一个好习惯，以防它们需要在本地导入，而不是依赖于Vue.component 的全局注册。