如何在 Vite + Vue 中使用 npm 包组件?
How to use an npm package component with Vite + Vue?
使用 Vue 将组件作为 npm 包添加到 Vite 的步骤是什么?
我假设这些:
npm install example
- 打开
src/App.vue
并添加 import Example from 'example'
- 在
App.vue
中,在<template>
中添加<Example />
对吗?
我正尝试像这样安装和使用 vue-select
,但它不起作用:
您描述的过程是正确的,但您还必须先注册该组件才能使用它(在 components: { ... }
内)。
既然你提到你正在使用 vue-select
,我将以此为例。
步骤 #0 - 安装
正如您已经完成的那样,确保您的项目已初始化 (npm init
),然后 运行 yarn add vue-select
/ npm i vue-select
.
步骤 #1 - 初始化
在您的 main.js
中,导入并注册:
import VSelect from 'vue-select';
Vue.component('v-select', VSelect);
/* rest of your Vue initialization here */
步骤 #2 - 使用组件
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
您还需要在 CSS 中导入样式表,其中:
@import 'vue-select/src/scss/vue-select.scss';
实例
如果你想看一个完整的例子,我在我的一个项目中使用了这个包,我在我的 main.js
and using it ThemeSelector.vue
.
中注册了这个组件
另外,如果您的项目很大和/或您只在一个地方使用这个组件,那么更好的方法是将它导入到使用它的组件中。这是以类似的方式完成的,但您还必须在 components: { ... }
下注册它才能在您的 <template>
.
中访问它
您的屏幕截图显示您正在 <script>
块中导入 vSelect
,并希望它自动注册到组件的模板中。这只适用于 <script setup>
块。
但是,您的 GitHub 存储库(似乎与您发布的屏幕截图不同)揭示了代码中的其他问题:
- 您正在使用 Vue 2 code to globally register the
v-select
component in your Vue 3 app. In Vue 3, global component registration is done from the application instance(即从 createApp()
返回)。
// main.js
import VSelect from 'vue-select';
// Vue.component('v-select', VSelect); ❌ Vue 2 code
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
.component('v-select', VSelect) ✅
.mount('#app')
- 你是using
@import
(CSS syntax) to import your SCSS file in the <script>
block。将 CSS 移动到 <style lang="scss">
块中;或删除 @
前缀,这将为 <script>
. 创建一个有效的 import
<script setup>
// @import 'vue-select/src/scss/vue-select.scss'; ❌ The @ prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>
<!-- OR -->
<style lang="scss">
@import 'vue-select/src/scss/vue-select.scss';
</style>
- 您的 project is missing
sass
,这是处理 SCSS 个文件所必需的。您可以将其安装为开发依赖项:
$ npm i -D sass
这是一个 demo,其中包含上面指出的修复。
使用 Vue 将组件作为 npm 包添加到 Vite 的步骤是什么?
我假设这些:
npm install example
- 打开
src/App.vue
并添加import Example from 'example'
- 在
App.vue
中,在<template>
中添加<Example />
对吗?
我正尝试像这样安装和使用 vue-select
,但它不起作用:
您描述的过程是正确的,但您还必须先注册该组件才能使用它(在 components: { ... }
内)。
既然你提到你正在使用 vue-select
,我将以此为例。
步骤 #0 - 安装
正如您已经完成的那样,确保您的项目已初始化 (npm init
),然后 运行 yarn add vue-select
/ npm i vue-select
.
步骤 #1 - 初始化
在您的 main.js
中,导入并注册:
import VSelect from 'vue-select';
Vue.component('v-select', VSelect);
/* rest of your Vue initialization here */
步骤 #2 - 使用组件
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
您还需要在 CSS 中导入样式表,其中:
@import 'vue-select/src/scss/vue-select.scss';
实例
如果你想看一个完整的例子,我在我的一个项目中使用了这个包,我在我的 main.js
and using it ThemeSelector.vue
.
另外,如果您的项目很大和/或您只在一个地方使用这个组件,那么更好的方法是将它导入到使用它的组件中。这是以类似的方式完成的,但您还必须在 components: { ... }
下注册它才能在您的 <template>
.
您的屏幕截图显示您正在 <script>
块中导入 vSelect
,并希望它自动注册到组件的模板中。这只适用于 <script setup>
块。
但是,您的 GitHub 存储库(似乎与您发布的屏幕截图不同)揭示了代码中的其他问题:
- 您正在使用 Vue 2 code to globally register the
v-select
component in your Vue 3 app. In Vue 3, global component registration is done from the application instance(即从createApp()
返回)。
// main.js
import VSelect from 'vue-select';
// Vue.component('v-select', VSelect); ❌ Vue 2 code
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
.component('v-select', VSelect) ✅
.mount('#app')
- 你是using
@import
(CSS syntax) to import your SCSS file in the<script>
block。将 CSS 移动到<style lang="scss">
块中;或删除@
前缀,这将为<script>
. 创建一个有效的
import
<script setup>
// @import 'vue-select/src/scss/vue-select.scss'; ❌ The @ prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>
<!-- OR -->
<style lang="scss">
@import 'vue-select/src/scss/vue-select.scss';
</style>
- 您的 project is missing
sass
,这是处理 SCSS 个文件所必需的。您可以将其安装为开发依赖项:
$ npm i -D sass
这是一个 demo,其中包含上面指出的修复。