Vue3按需引入element plus 以及icon

原创

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

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

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

最近在自学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 'unplug