使用 Vue 將組件作為 npm 包添加到 Vite 的步驟是什么？
我假設這些：
npm install example- 打開
src/App.vue并添加import Example from 'example' - 在
App.vue, 在<template>, 添加<Example />
那是對的嗎？
我正在嘗試vue-select像這樣安裝和使用，但它不起作用：
uj5u.com熱心網友回復：
您描述的程序是正確的，但是您還必須先注冊該組件才能使用它（在 內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并使用它ThemeSelector.vue。
此外，如果您的專案很大和/或您只在一個地方使用此組件，那么更好的方法是將其匯入到正在使用它的組件中。這以類似的方式完成，但您還必須在下面注冊它components: { ... }才能在您的<template>.
uj5u.com熱心網友回復：
您的螢屏截圖顯示您正在匯入vSelect一個<script>塊，并希望它自動注冊為組件的模板。那只會在一個<script setup>塊中起作用。
但是，您的 GitHub 存盤庫（似乎與您發布的螢屏截圖不同）揭示了您的代碼中的其他問題：
- 您正在使用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')
- 您正在使用
@import（CSS 語法）在<script>block中匯入您的 SCSS 檔案。將 CSS 移動到一個<style lang="scss">塊中；或洗掉@前綴，這將創建一個有效import的 for<script>。
<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>
- 您的專案丟失
sass，這是處理 SCSS 檔案所必需的。您可以使用以下命令將其安裝為開發依賴項：
$ npm i -D sass
這是一個帶有上述修復的演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461769.html