问题:Vite+Vue如何使用npm包组件?

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

我假设这些:

1.npm install example

2.打开src/App.vue,添加import Example from 'example'

3.在App.vue中,在<template>中,添加<Example />

那是对的吗?

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

解答

您的屏幕截图显示您正在将vSelect导入到<script>块中,并希望它自动注册到组件的模板中。这只适用于<script setup>块。

但是,您的 GitHub 存储库(似乎与您发布的屏幕截图不同)揭示了您的代码中的其他问题:

1. 您正在使用Vue 2 代码在您的 Vue 3 应用程序中全局注册v-select组件。在 Vue 3 中,全局组件注册是从应用程序实例完成的(即从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')

2.你是,使用@import(CSS语法)在<script>块中导入你的SCSS文件。将 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>

3. 你的项目缺少处理 SCSS 文件所需的sass。您可以使用以下命令将其安装为开发依赖项:

$ npm i -D sass

这是一个演示上面指出的修复。