Question

我可以将由Vue-CLI 3构建命令（vue-cli-service build --target wc --name foo ./src/App.vue）生成的Web组件独立使用网页中的组件：

<script src="https://unpkg.com/vue"></script>
<script src="./foo.js"></script>

<foo></foo>

但是，当我将此组件导入另一个Vue项目时：

import Vue from 'vue'
import foo from 'foo'

我收到此错误：

Uncaught ReferenceError: Vue is not defined

Vue CLI 3 documentation说：

在Web组件模式下，Vue已外部化。这意味着即使您的代码导入了Vue，捆绑也不会捆绑Vue。该捆绑包将假定Vue作为全局变量在主页上可用。

但是，当您要在另一个项目中使用Web组件时，并没有说明如何解决此问题。

你有什么主意吗？

Answer 1

实际上，您引用的语句意味着您不需要使用import Vue from 'vue'。 Vue可以用作全局变量，因为它已由脚本<script src="https://unpkg.com/vue"></script>.

添加

Answer 2

实际上，如果要在由vue-cli构建的另一个项目中使用组件，则首先应该具有index.js（或任何其他名称），然后在该文件中导出组件，例如

export {default as Button} from './button/button'
export {default as ButtonGroup} from './button/button-group'
export {default as Cascader} from './cascader/cascader'

然后在package.json中更改'scripts''vue-cli-service build --target wc --name foo ./src/index.js' 您可以将dist目录复制到新项目的node_modules中，然后使用它（但不推荐）。您可以使用'npm publish'它，在新项目中，请使用npm install

如何在另一个Vue项目中使用Vue Web组件（由Vue-CLI 3生成）？

2 个答案: