如何在 Vite + Vue 中使用 npm 包组件?

How to use an npm package component with Vite + Vue?

使用 Vue 将组件作为 npm 包添加到 Vite 的步骤是什么?

我假设这些:

  1. npm install example
  2. 打开 src/App.vue 并添加 import Example from 'example'
  3. 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 存储库(似乎与您发布的屏幕截图不同)揭示了代码中的其他问题:

  1. 您正在使用 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')
  1. 你是using @import (CSS syntax) to import your SCSS file in the <script> block。将 CSS 移动到 <style lang="scss"> 块中;或删除 @ 前缀,这将为 <script>.
  2. 创建一个有效的 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>
  1. 您的 project is missing sass,这是处理 SCSS 个文件所必需的。您可以将其安装为开发依赖项:
$ npm i -D sass

这是一个 demo,其中包含上面指出的修复。