前言：该文没有全局引入的方式讲解 官方文档：
安装淘宝镜像（非必须）
先安装好淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass --save
遇到错误 cnpm : 无法加载文件D:\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行，参考博客：https://blog.csdn.net/weixin_45809419/article/details/106075595
安装element-plus依赖
#用这个命令！！！
vue add element-plus
image.png
Volar 支持#
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
按需导入（unplugin-vue-components ）+自动导入（unplugin-auto-import）配置
引入依赖
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.ts 添加以下配置（Webpack官方文档也有）
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
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: [
vue(), // ...
AutoImport({
imports: [
// 自动导入vue相关函数
"vue",
],
dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
resolvers: [ElementPlusResolver()],
}),
Components({
//ElementPlus按需加载
resolvers: [ElementPlusResolver()],
//需要按需加载的目录文件
dirs: ["src/components"],
extensions: ["vue"],
// 生成 `components.d.ts` 全局声明
dts: "src/components.d.ts",
}),
],
});
像El-Message这样的是不能自动引入的使用的时候还是要导入，
import { ElMessage } from 'element-plus' ，而且样式会失效，在main.ts文件中加入以下代码，引入消息的样式文件（如果文件路径报错，在node_modules/element-plus目录下找找看）
import "element-plus/lib/theme-chalk/el-message.css";
