在vue3中使用ElementPlus的colorPicker组件

一开始我没有注意区分我是vue3的项目，我一直在尝试使用element-ui的colorpicker框架，但是一直都有问题。

后来我了解到，element-ui只支持vue2，vue3需要引入element-plus进行使用，两个分别对应vue2和3两个版本，各自独立，无法跨级兼容。

1. 安装element-plus

我用的是yarn包管理器

yarn add element-plus

2. 我是想要按需导入 ElColorPicker 组件，所以需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

yarn add -D unplugin-vue-components unplugin-auto-import

在vite.config.ts文件中插入以下代码

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

 3. 然后就可以在需要的位置直接使用了（无需显示引入）

（unplugin-vue-components 会根据使用的组件自动引入相应的 Element Plus 组件，因此我们无需手动导入 ElColorPicker 组件）

直接写就行

<template>
  <el-color-picker
    v-model="color"
    size="default"
    @change="handleColorPickerChange">
  </el-color-picker>
<template />

原本我还自己import { ElColorPicker } from 'element-plus'了，结果就是：会出问题，页面上根本就看不到组件，我找了很久的原因，发现就是这个显示引入的问题，不要自己import就可以了。