【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标
【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标
github: https://github.com/heyongsheng/hevue3-admin 码云： https://gitee.com/ihope_top/hevue3-admin 线上体验地址 https://ihope_top.gitee.io/hevue3-admin
本章知识点：自动导入element-plus组件，自动导入element-plus图标，自定义图标的解决方案。
引入element-plus
element-plus官方介绍了几种使用方式，分别是完整导入、按需导入和手动导入，这里我们使用官方比较推荐的方式——按需导入，按需导入就是不用全局注册，也不需要在使用的页面import，我们可以在页面中直接使用。
首先我们进行element-plus安装
yarn add element-plus之后我们在vite.config.ts中进行配置，这里既然进行自动引入了，顺便把vue的组件也自动引入了，大家应该知道vue3的组合式API（也是本文采用的方式）中无论是ref还是生命周期函数之类的，都需要在使用时进行手动引入，这里我们把vue的组件也还有vue-router自动引入了，后期用的时候就无需再手动引入了。
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()],
imports: ['vue', 'vue-router'],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})这个时候不出意外我们就可以在页面中进行使用了，我们来测试一下
// App.vue
<template>
<div>
<el-button @click="showMessage">555</el-button>
</div>
<div></div>
</template>
<script setup lang="ts">
const showMessage = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})
}
</script>
<style lang="scss"></style>
可以看到都没问题，已经可以正常使用了，不过这时候ts可能会报错，说找不到我们使用的组件
我们可以发现，刚才我们的项目目录已经自动生成了一个auto-imports.d.ts，我们在根目录的tsconfig.json里面的include中将它引入即可。
// tsconfig.json
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"auto-imports.d.ts"
],这样子我们的报错就没有啦
element-plus图标自动引入
element-plus中使用图标不像在element-ui中一样直接使用类名就行，在element-plus中，图标也需要进行引入，官方也介绍了几种方式，我们这里介绍一下图标如何自动引入，就像上面说的组件自动引入一样。
首先我们需要安装unplugin-icons
yarn add unplugin-icons -D之后在vite.config.ts中进行配置
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
AutoImport({
resolvers: [
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
],
}),
Icons({
autoInstall: true,
}),现在我们就可以在页面中自由使用element-plus的图标啦，注意的是，我们使用的名字需要时这样的格式i-ep-name，例如
// 官方文档点击复制代码
<el-icon><Plus /></el-icon>
// 需要修改为
<el-icon><i-ep-plus /></el-icon>这里提一下，使用<el-icon>包裹着，是官方的建议用法，特别是在某些element组件嵌套使用时，比如菜单，没有<el-icon>包裹，可能样式会有错。
自定义图标
element-plus内置的图标有时候并不能完全满足我们的需求，我们还需要一些额外的自定义图标。
在以前的项目中，因为都是小公司，所以图标解决方案一般都是切图，UI也不会上传图标到iconfont，如果是自己负责的小项目而且没有UI的话，图标一般会用通过iconfont采用Unicode的方法导入，这个方法的优点很明显，就是比图标占用内存小，图标大小颜色可配置。但是缺点就是不同的人进行开发的话图标难以维护，难以扩展，因为你很可能需要找到上一个人，问他要到iconfont上的项目地址，总之就是很麻烦。
这个项目因为考虑过要开源，所以图标的可扩展性一定要搞好，于是就想到了使用svg图标，但是一个个引入又比较麻烦，就想看看有没有什么更好的解决方法，于是乎想起了花裤衩大佬的手摸手系列，在手摸手，带你优雅的使用 icon一文中知道了 svg-sprite 这个玩意儿，这个原文中有介绍，这里就不重复赘述了，不过原文介绍的是 webpack 使用的的方式，这里介绍一下vite使用的方式。
首先我们创建文件夹assets/icons/svg，用来存放我们下载的svg
之后再创建一个assets/icons/.ts，用来返回所有图标的名字，我们在菜单管理里选择图标时需要用到。
const icons = import.meta.glob('./svg/*.svg')
let iconNames: Array<string> = []
Object.keys(icons).forEach((key) => {
const name = key.replace(/\.\/svg\/(.*)\.svg/, '$1')
iconNames.push(name)
})
export default iconNames之后我们需要安装一下插件 vite-plugin-svg-icons
yarn add vite-plugin-svg-icons -D安装之后需要在vite.config.ts中进行配置
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
plugins: [
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
svgoOptions: {
// 移除svg默认颜色
plugins: [
{
name: 'removeAttrs',
params: { attrs: ['class', 'data-name', 'fill', 'stroke'] }
}
]
}
})
],svgoOptions里我配置了一些移除默认颜色等属性，因为我从iconfont下载的svg图标就算不选择颜色，也会自带默认颜色，而有默认颜色的svg图标无法设置颜色。
之后我们还需要创建一个icon组件components/SvgIcon/index.vue
<template>
<svg aria-hidden="true" class="svg-icon" :class="className">
<use :href="symbolId" />
</svg>
</template>
<script setup lang="ts">
const props = defineProps({
prefix: {
type: String,
default: 'icon'
},
name: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
outline: none;
}
</style>创建之后在main.ts引入并注册为全局组件
import SvgIcon from './components/SvgIcon/index.vue'
import 'virtual:svg-icons-register'
createApp(App).component('svg-icon', SvgIcon)
之后我们就可以在页面中进行使用了
<svg-icon class="menu-icon" name="bangzhu" />.menu-icon {
font-size: 30px;
color: #f66;
}
本章就到这里，下一章我们来学习scss的使用，以及全局的暗黑模式和自定义主题