Vue3按需引入element plus 以及icon

原创已于 2023-12-13 00:29:27 修改 · 1.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-12-12 23:26:29 首次发布

本文介绍了作者在自学Vue3时遇到的element-plus安装、按需导入插件、配置vite.config.js以及解决遇到的四个主要问题的过程，包括模块缺失、图标显示、动态组件和侧边栏菜单的图标显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在自学Vue3，打算做一个纯前端的小东西，记录一下element-plus的安装和使用。以下是安装使用过程，以及踩过的坑。

一、安装element-plus及icon

npm i element-plus @element-plus/icons-vue -S

二、安装按需导入的插件

npm i  unplugin-auto-import unplugin-vue-components unplugin-icons -D

三、配置vite.config.js

我是从官网上拷贝的配置内容，官网配置文件地址其中 “import Inspect from 'vite-plugin-inspect'” 我本地飘红，网上也搜索不到就删掉了

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
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'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    Vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],

      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),

    Icons({
      autoInstall: true,
    }),

  ],
})

四、踩过的坑

1、can not find module 'path'，从官网拷贝回来的配置文件第一行就飘红了，网上找的解决方案

npm install -D @types/node

2、按照官网配置以后，icon图标不显示，浏览器控制台还出现了警告：“ [Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. ”

也是百度查询的解决方案。修改icon的写法：在原来icon写法的基础上增加 i-ep-前缀

<i-ep-location/>

3、按照上述都进行了设置，在修改icon的写法的时候，发现 @iconify-json/ep 会自动安装上。等待安装结束以后一切就正常了

4、动态生成侧边栏菜单时icon不显示

在静态显示图标成功以后，我在路由中设置的图标名称加了前缀i-ep-，并使用了<component>动态组件来渲染图标，以下是最开始的写法。结果icon还是没有渲染出来。

  name: 'home',
  path: '/home',
  component: () => import('../../views/home/index.vue'),
  meta: { title: '首页', icon: 'i-ep-House' },

<el-icon><component :is="item.meta.icon"/></el-icon>

在百度上搜了一圈以后发现是因为在vue3中 component需要用使用:is动态绑定组件，而不是简单的字符串了。将icon名称重新修改，去掉引号，并且修改前缀为IconEp后问题解决。如下所示：

  name: 'home',
  path: '/home',
  component: () => import('../../views/home/index.vue'),
  meta: { title: '首页', icon: IconEpHouse },

参考文章地址