VVT项目第三步：引入UI库(Element Plus)

Element Plus

市场上有很多支持Vue3和vite的UI，用什么UI可以根据自己兴趣选择。

Element Plus地址

接入方式

官网有很多教程，我就不说各种方式，只说一种。

第一步：

保证npm版本大于10.2.1，node版本大于18.17.0，如果低于就想办法升级上来。

第二步：

安装插件：unplugin-vue-components unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

第三步：

安装成功后，修改vite.config.ts

......

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


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        ……
    ],
})

然后安装Element-Plus库
npm i element-plus

使用

安装成功后就可以使用了。参考官网手册和组件使用方式。
Element Plus地址