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

Question

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

我假设这些：

npm install example
打开 src/App.vue 并添加 import Example from 'example'
在App.vue中，在<template>中添加<Example />

对吗？

我正尝试像这样安装和使用 vue-select，但它不起作用：

Answer 1

您描述的过程是正确的，但您还必须先注册该组件才能使用它（在 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>.

中访问它

Answer 2

您的屏幕截图显示您正在 <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，其中包含上面指出的修复。

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

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

vue.js

vite

vue-select

步骤 #0 - 安装

步骤 #1 - 初始化

步骤 #2 - 使用组件

实例