如何使用Vue 3制作下拉列表？代码报VueSelect未定义引用错误

核心问题1：未引入vue-select依赖 #

该报错的直接原因是执行注册语句时，VueSelect 变量不存在，你没有提前将vue-select组件库引入到当前运行环境中：

• 若使用CDN方式开发，需要在Vue的引入标签之后添加vue-select的对应引入资源，确保全局可访问VueSelect变量
• 若使用vue-cli/vite等脚手架项目，需要先安装vue-select依赖，再在当前代码顶部导入：import VueSelect from 'vue-select'

核心问题2：组件注册时机和调用对象错误 #

Vue 3要求全局组件必须在应用挂载前完成注册，且注册方法要调用你创建的app实例（也就是代码里的productForm）的component方法，不能在挂载后返回的根实例vm上注册。
你现有代码先执行mount挂载应用，挂载过程中custom-form组件内部已经要渲染vue-select，但此时vue-select还未完成注册，就算后续执行注册语句也不生效。

修复后参考代码 #

// 确保此处已经提前引入Vue和VueSelect依赖
var productForm = Vue.createApp ({
    data: function() {
        return {
            product: {
                sku: 0,
                name: 'asdf',
                price: 0
            }
        }
    }
})

// 提前注册vue-select全局组件
productForm.component('vue-select', VueSelect )

productForm.component('custom-form', {
    props: ['value', 'customOptions'], // 重命名避免和内部data重名冲突
    template: `
        <label>SKU<input type="text" :value="sku"></label>
        <label>Name<input type="text" :value="name"></label>
        <label>Price<input type="text" :value="price"></label>
        <vue-select :options="options" label="option"></vue-select>
    ` ,
    data: function() {
        return {
            sku: 0,
            name: 'asdf',
            price: 0,
            options: [
                { option: "Size" },
                { option: "Weight" },
                { option: "Dimensions" }
            ]
        }
    }
})

// 所有组件注册完成后再挂载应用
const vm = productForm.mount('#product_form')

内容的提问来源于stack exchange，提问作者v01d