<script>
块中导入 vSelect
,并期望它会自动注册到组件的模板中。这只在 <script setup>
块中才有效。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
来在<script>
块中导入您的SCSS文件。要么将CSS移动到<style lang="scss">
块中;要么删除@
前缀,这将创建一个有效的import
用于<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
这里是一个演示链接,其中指出了上述修复措施。
app.component()
已经在答案中提供了 :) 本地组件注册可以通过 components
选项(与 Vue 2 中相同)或通过在 <script setup>
中导入组件来完成。 - tony19您所描述的过程是正确的,但是在使用组件之前,您还必须先注册该组件(在components: { ... }
内)。
由于您提到正在使用vue-select
,我将以此作为示例。
如您已经完成的那样,请确保已初始化项目(npm init
),然后运行yarn add vue-select
/ npm i vue-select
。
在您的main.js
中,导入并注册:
import VSelect from 'vue-select';
Vue.component('v-select', VSelect);
/* rest of your Vue initialization here */
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
您还需要在 CSS 文件中导入样式表:
@import 'vue-select/src/scss/vue-select.scss';
如果你想看一个完整的示例,我在我的一个项目中使用了这个包,我在我的main.js
中注册了该组件,并在ThemeSelector.vue
中使用它。
此外,如果你的项目很大,或者你只在一个地方使用这个组件,那么更好的方法是将其导入到使用它的组件中。这个过程类似,但你必须在components: { ... }
下注册它才能在你的<template>
中访问它。
脚本:/Users/hennotaht/www/vite-vue-test/src/App.vue?id=0:5:0:
5 │ @import 'vue-select/src/scss/vue-select.scss';
╵ ^
- Henno
v-select
而不是您代码中的vSelect
。您是否有一个运行的CodePen或其他东西,我可以让它工作并更新我的答案,使其更符合您的情况。 - Lissy93