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?