Exportieren Sie Vue und Vuex in ein benutzerdefiniertes npm-Paket

Question

Ich versuche, ein Vue/Vuex-Projekt in privat gehostete npm-Pakete aufzuteilen. Ich glaube, ich komme dorthin, bin mir aber über mein aktuelles Layout nicht sicher. Bisher habe ich Folgendes getan:

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

Mein Ziel ist es, das BrokerProposal-Verzeichnis importierbar zu machen, was über die erste index.js-Datei geschieht:

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;

Dieses Projekt verwendet auch vuex, daher habe ich die Mutatoren usw. für den Status in dieses Paket aufgeteilt, um es mit dem BrokerProposal zu verwenden. Der Endbenutzer kann diesen Speicher nach dem Import binden, hier ist die Datei 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

Ich denke, ich sollte eine weitere index.js-Datei auf derselben Ebene wie /src einfügen, da es in der package.json-Datei einen „Haupt“-Abschnitt gibt, der auf etwas verweisen muss?

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 进行全局注册。