Question

我在项目中遇到了一些架构方面的变化，需要一些指导才能开始。以下是我的问题。

上下文 我从单个Vue应用程序开始，其中包括许多组件，如查询，可视化，CRUD等。查询本身是几个独立组件（主要是表单）的组合。后来，我启动了另一个具有完全不同用例的应用程序，但它还需要查询功能。所以，我只是在其中查询组件。

方案现在一切都运行正常，但是在这两个单独的项目中管理更新/更改查询组件是相当混乱的。现在我正在考虑将查询组件作为一个单独的独立工具/包，并将其包含在两个项目中。这样做可以简化我对查询组件的代码管理，因为我只需要对单个代码库进行更改。

问题陈述 主要问题是查询组件，我希望将其分离，严重依赖于Vuex使用其突变，操作和getter进行集中式状态管理。我已经看过很多关于如何将单个Vue组件作为npm packge的教程和博客。但是我的用例有点不同，就我而言，正如我之前所说，我在查询中有许多组件（取决于Vuex突变和操作）。我现在很困惑如何使用自己的Vuex商店将查询分开，然后将其包含在该应用程序各自的Vuex商店的应用程序中。

我之前从未制作过一个节点包，也许这是一些微不足道的基本内容，我没有得到，所以请原谅我在该领域的知识不足。

非常感谢任何帮助/建议

Answer 1

让我们试着给你一个正确的答案。想象一下，你有一个带有查询组件和商店的npm包。然后，您的npm包应该导出类似（检查下面）的东西，以便能够使用商店和组件构建一个新的Vue实例：

import Querying from '[path]/components/Querying'
import store from '[path]/store';

export default {
    QueryingComponent: Querying, store: store
}

上面的代码应该在 webpack.conf 的入口点。如果入口点是名为index.js的文件，那么它应该在此文件中。

module.exports = {
entry: resolve('/src/index.js'),
...

另一方面，在安装软件包之后，您将拥有组件和商店。这样你就可以通过在 index.html 页面中创建一个带有另一个id的新div来实例Vue并在页面的另一部分中呈现它。

import components from '[your package]';
const yourStore = components.store;
const yourQueryingComponent = components.QueryingComponent;

new Vue({
  yourStore,
  render: (h) => h(yourQueryingComponent),
}).$mount('#another-app');

希望有所帮助！

在另一个中使用独立的Vue项目作为节点包

1 个答案: