一、安装Element-Plus
yarn add element-plus
二、配置按需自动导入
2.1、首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件
yarn add -D unplugin-vue-components unplugin-auto-import
2.2、在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()],
}),
],
})
三、使用
在项目中可以直接使用element组建了
Element-lus官网：https://element-plus.org/zh-CN/
四、自动引入vue语法
4.1、在vite.config.ts中添加如下配置
AutoImport({
// 自动导入 Vue 相关函数，如：ref, reactive ...
imports: ['vue', 'vue-router'],
resolvers: [ElementPlusResolver()],
eslintrc: {
enabled: true,
},
}),
4.2、在tsconfig.json添加配置
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"./auto-imports.d.ts"
],
