element-plus踩坑日记icon vite配置icon真的费老鼻子力气了

各个框架图标遍历玩法

免费的框架往往是最贵的,谁用谁知道,浪费了太多配置的时间,一个破ICON能把人折腾死.今天你饿了么?

element-plus

安装element-plus

pnpm install element-plus -D

效果

按需自动导入

//首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

效果

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

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

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

效果

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({
         resolvers: [ElementPlusResolver()],
     }),
     Components({
         resolvers: [ElementPlusResolver()],
     }),
 ]
})

路由增加一个测试页面专门测试element的组件

//common.ts

import {RouteRecordRaw} from "vue-router";

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'index',
        // redirect: {name: 'admin'},
        component: () => import('../../pages/Index.vue'),
        children:[
            {
                path: '/element-plus-test',
                name: 'element',
                component: () => import('../../pages/test/ElementTest.vue')
            }
        ]
    },
]

export default routes

顺便把页面组件也写了

修改一下Index.vue

//Index.vue

编写测试界面

//ElementTest.vue

引入图标

​ 你会发现引入的图标无法使用😟饿了么就是这么坑，折腾死人

 pnpm install @element-plus/icons-vue -D

这还没完，继续引入大佬的插件

// 使用unplugin-icons和unplugin-auto-import自动从Iconify导入任何图标集合
// unplugin-auto-import 我们上面装过了所以只装一个🙂
pnpm i  unplugin-icons -D

然后然后又要配置了

// 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'
// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'


const path = require('path');

function _resolve(dir) {
    return path.resolve(__dirname, dir);
}

// https://vitejs.dev/config/
export default define

vue3 在用Element Plus布局页面时，遇到了一个图标循环加载的问题。开始不知道如何渲染图标，以为像ElementUI 一样可以通过class进行渲染图标，发现无法使用，让后我发现引用的图标是组件，组件的话就可以使用 进行渲染了. 然而如果你用大佬的插件这招并不灵注册全局才是正道！

注册所有图标

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}