elementplus自动导入配置,vite项目

自动导入组件和图标配置, 这些配置项其实看官网的也是可以的,不过配置图标的时候有个重要的依赖@iconify-json/ep ,官网没提, 也是很容易被忽略的一个依赖,缺了这个依赖,图标的自动导入是没有效果的,

下载依赖
复制代码
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1", 
    "@iconify-json/ep": "^1.1.15",
    "element-plus": "^2.7.3",
  },
  "devDependencies": {
    "unplugin-auto-import": "^0.17.6",
    "unplugin-icons": "^0.19.0",
    "unplugin-vue-components": "^0.27.0",
  }

配置项

复制代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// 这个依赖和题目无关
import Inspect from "vite-plugin-inspect";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      dts: "src/types/auto-import.d.ts", // 路径下自动生成文件夹存放全局指令
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: "Icon",
        }),
      ],
    }),
    Components({
      dirs: ["src/components"], // 指定需要自动导入的组件所在的目录列表
      dts: "src/types/components.d.ts", // 是否生成类型声明文件 true会生成`.d.ts`的文件,也可以使用字符串地址来指定文件的位置
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ["ep"],
        }),
      ], // 指定
    }),
    Icons({
      autoInstall: true,
    }),
    //  这个和题目无关
    Inspect(),
  ],
   // 这个和题目无关
  server: {
    host: "0.0.0.0",
  },
 // 这个和题目无关
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@back": path.resolve(__dirname, "./src/views/back-stage"),
    },
  },
});
使用
复制代码
// 之前的
//<el-icon><location /></el-icon> 
//<el-icon><DocumentDelete /></el-icon>

//现在的
<el-icon><i-ep-location /></el-icon>
<el-icon><i-ep-DocumentDelete /></el-icon>
// 这样拆开写也是可以的
<el-icon><i-ep-document-delete /></el-icon>
相关推荐
唐•苏凯17 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军17 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。17 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天66617 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛17 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴17 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭17 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
薄雾晚晴17 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua17 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL17 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统