Question

我想将与UI相关的东西（使其成为独立的库）与其他项目（消费者）分开，以避免代码重复并使UI在不同项目之间保持一致。我不打算将这些软件包发布到NPM，它将仅在我的PC和部署服务器上。

我使用Vue CLI创建了两个Vue项目：producer和consumer。 consumer是我在开发组件以构建整个UI时要消耗producer的地方。

目前，我可以使用一些东西-producer具有以下src结构：

components/
    Example1.vue
    Example2.vue
index.js

在.vue文件中，我照常编写Vue组件，在index.js中导出它们：

export {default as Example1} from './components/Example1';
export {default as Example2} from './components/Example2';

此后，我在npm link程序包中运行producer，在npm link producer程序包中运行consumer以将其本地链接。

现在在consumer中，我可以做到

import {Example1} from "producer";
import "producer/dist/ui.css";
Vue.component("ui-example1", Example1);

并使用producer中的组件。

要开发和使用此设置，我的第一次尝试是运行

生产者：vue-cli-service build --target lib --watch --name ui ./src/index.js
消费者：vue-cli-service serve

但是 1）我没有在dist目录中获得* .css文件， 2） consumer无法正常工作并显示ReferenceError: require is not defined要解决这些错误，我在生产模式下运行生产者的vue-cli-service：vue-cli-service build --target lib --watch --name ux ./src/index.js --mode production

现在我终于可以在producer包中使用consumer组件并导入css文件，但是在producer中进行修改会在consumer中刷新整个页面。我想这是因为我在生产模式下构建了依赖项目，现在整个设置对我来说似乎是不正确的。

总结一下：

实现这种生产者-消费者设置的正确方法是什么？我在Github上发现了数十个示例组件库，但我从未见过他们如何为生产者和消费者项目设置这样的开发过程。
是否可以将单独的项目链接在一起并使用HMR跟踪生产者项目中的更改？

如何同时开发Vue组件库及其用户项目？

0 个答案: