【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

十里青山

发布于 2023-04-28 15:57:46

2.5K0

发布于 2023-04-28 15:57:46

文章被收录于专栏：我的前端之路

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的使用，以及全局的暗黑模式和自定义主题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除

element

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度