Как использовать веб-компоненты Vue (сгенерированные Vue-CLI 3) внутри другого проекта Vue?

Question

Я могу использовать веб-компоненты, сгенерированные командой сборки Vue-CLI 3 (vue-cli-service build --target wc --name foo ./src/App.vue), в качестве автономного компонент на веб-странице, как это:

<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 гласит:

В режиме веб-компонента Vue выводится наружу. Это означает, что комплект не будет связывать Vue, даже если ваш код импортирует Vue. Пакет предполагает, что Vue доступен на странице хоста как глобальная переменная.

Но это не говорит о том, как решить эту проблему, когда вы хотите использовать веб-компоненты внутри другого проекта.

Есть ли у вас идея?

Answer 1

На самом деле, если вы хотите использовать компоненты в другом проекте, созданном 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'

затем измените 'scripts' в package.json 'vue-cli-service build --target wc --name foo ./src/index.js' Вы можете скопировать каталог dist в модули node_modules нового проекта, а затем использовать его (но это не рекомендуется). Вы можете использовать npm publish, а в своем новом проекте использовать npm установить его

Answer 2

На самом деле цитата, которую вы цитируете, означает, что вам не нужно использовать import Vue from 'vue'. Vue может использоваться как глобальная переменная, так как она была добавлена ​​скриптом <script src="https://unpkg.com/vue"></script>.