하나의 커스텀 npm 패키지로 Vue 및 Vuex 내보내기

하나의 커스텀 npm 패키지로 Vue 및 Vuex 내보내기

Vue/Vuex 프로젝트를 개인적으로 호스트하는 npm 패키지로 분할하려고 합니다.현재 레이아웃이 불분명하기 때문에 현재 진행 중인 작업은 다음과 같습니다.

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

제 목표는 Broker Proposal 디렉토리를 Import할 수 있도록 하는 것입니다.이 디렉토리는 첫 번째를 통해 실행됩니다.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도 사용하기 때문에 Broker Proposal과 함께 이 패키지로 스테이트의 변환자 등을 분류했습니다.이 패키지는 Import 후 최종사용자가 이 스토어를 바인드 할 수 있습니다.다음은 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

다른 index.js 파일을 같은 레벨에 포함시켜야 할 것 같습니다./src패키지에 '메인' 섹션이 있기 때문에뭔가 짚이는 게 있을 것 같은데요?

다음과 같은 부작용Vue.use(Vuex)그리고.GlobalVue.use(plugin)이 패키지를 소비하는 프로젝트에 방해가 될 수 있으므로 피해야 합니다.적절한 Vue 인스턴스로 플러그인을 설정하는 것은 프로젝트의 책임입니다.

모든 공개 수출은 진입점에서 수출로 명명할 수 있습니다.src/index.js:

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

또한 컴포넌트를 로컬로 Import할 필요가 있는 경우에는 컴포넌트를 내보내는 것이 좋습니다.이 경우 글로벌 등록에 의존하지 않고Vue.component.

언급URL : https://stackoverflow.com/questions/70580563/exporting-vue-and-vuex-in-one-custom-npm-package