媒介：该文没有全局引入的方式解说 官方文档：
安装淘宝镜像（非必须）
先安装好淘宝镜像
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 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-importvue.config.ts 添加以下设置（Webpack官方文档也有）
// vite.config.tsimport { 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"; |
