我正在尝试将 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,所以我将状态的变异器等分解到这个包中以与BrokerProposal一起使用,最终用户可以在导入后绑定这个存储,这是index.js文件: p>
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”部分必须指向某些内容?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
应避免
Vue.use(Vuex)和GlobalVue.use(plugin)等副作用,因为它们可能会干扰使用此包的项目。项目有责任使用适当的 Vue 实例设置插件。所有公共导出都可以在入口点命名为导出,例如
src/index.js:export { default as BrokerProposal } from './BrokerProposal'; export { default as store } from './store';导出组件也是一个很好的做法,以防需要在本地导入它们,而不是依赖
Vue.component进行全局注册。