vue3+vite路由中使用element自动导入图标-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+vite路由中使用element自动导入图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3+vite路由中使用element自动导入图标,前端,vue.js,javascript

1.package.json

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.3.7",
},
"devDependencies": {
    "@iconify-json/ep": "^1.1.11",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-icons": "^0.16.3",
    "unplugin-vue-components": "^0.25.1",
}

vue3+vite路由中使用element自动导入图标,前端,vue.js,javascript

2.vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    base: './',
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'],
        resolvers: [
          // 自动导入element plus相关函数（带样式）
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
            enabledCollections: ['ep']
          })
        ]
      }),
      Components({
        // 要搜索组件的目录的相对路径。默认 ['src/components']
        dirs: ['src'],
        // 组件的有效文件扩展名。
        extensions: ['vue'],
        // 搜索子目录
        deep: true,
        resolvers: [
          // 自动导入element plus组件
          ElementPlusResolver(),
          NaiveUiResolver(),
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i',
            enabledCollections: ['ep']
          })
        ]
      }),
      Icons({
        compiler: 'vue3',
        autoInstall: true
      })
    ],
    resolve: {
      // 配置路径别名
      alias: {
        '@': resolve(__dirname, './src'),
        'api': resolve(__dirname, './src/api'),
        'views': resolve(__dirname, './src/views'),
        'utils': resolve(__dirname, './src/utils'),
        'comp': resolve(__dirname, './src/components'),
        'assets': resolve(__dirname, './src/assets')
      },
      extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']
    },
    define: {
      'process.env': {
        VITE_APP_BASE_API: env.VITE_APP_BASE_API
      }
    },
    server: {
      host: '0.0.0.0',
      port: 3000, // 端口
      open: false, // 启动项目后打开浏览器
      hot: true,
      overlay: {
        warning: false,
        error: true
      },
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: 'https://devestate.yyepark.com/',
          ws: true,
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace('^' + [env.VITE_APP_BASE_API], '')
        }
      }
    }
  }
})

3.使用图标前面加上：<i-ep-xxx />

<el-icon><i-ep-CloseBold /></el-icon>

vue3+vite路由中使用element自动导入图标,前端,vue.js,javascript

4.路由中使用

<el-icon v-if="childItem.meta && childItem.meta.icon">

<component :is="childItem.meta.icon" />

</el-icon>

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../layout/index.vue'
import { markRaw } from 'vue'

export const asyncRoutes = [
{
path: '/',
name: 'HomePage',
component: Layout,
redirect: '/home',
children: [
{
path: 'home',
name: 'Home',
component: () => import('@/views/Home/index.vue'),
meta: { title: '首页', icon: markRaw(IconEpMenu) } //markRaw
}
]
}
]文章来源地址https://www.toymoban.com/news/detail-612664.html