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

【问题标题】：Using independent Vue project within another as node package在另一个中使用独立的 Vue 项目作为节点包
【发布时间】：2018-10-19 09:54:10
【问题描述】：

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

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

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

问题陈述 主要问题是查询组件，我希望将其分开，它严重依赖 Vuex 使用其突变、操作和吸气剂进行的集中状态管理。我看过许多关于如何将单个 Vue 组件制作为 npm 包的教程和博客。但是我的用例有点不同，就我而言，正如我之前所说的，我在 Querying 中有许多组件（取决于 Vuex 突变和操作）。我现在对如何将 Querying 与其自己的 Vuex 存储区分开，然后将其包含在具有该应用程序各自的 Vuex 存储区的应用程序中感到困惑。

我以前从未制作过节点包，也许这是我没有得到的琐碎和基本的东西，所以请原谅我在该领域的知识较少。

任何帮助/建议将不胜感激

【问题讨论】：

标签： javascript npm vue.js node-modules vuex

【解决方案1】：

让我们试着给你一个正确的答案。想象一下，您有一个带有 查询组件 和 store 的 npm 包。然后，你的 npm 包应该导出类似的东西（检查下面），以便能够使用 store 和组件构建一个新的 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');

希望有帮助！

【讨论】：