物料库之Svg通用组件的解决方案

🌬🌬🌬前言：我们都知道前端直接面临的是大众的视觉挑战，平时比较常见的是前/后台系统，后台系统的特点是样式同质化高，而前台系统的特点是个性化样式，无论是前台/后台系统，不仅要给用户带来更好的视觉体验还要考虑到用户的日常操作习惯，除了考验我们的设计同学外，前端同学也要针对不同场景的系统进行区别处理，当然现在市场上有很多成熟的组件库比如：Element 、Ant，物料库：Taro、物料中心，当然也有公司存在个性化设计主题，所以需要自行开发内部通用组件库，下面是基于Vue3+Vite+Tailwind封装的一些通用组件分享，大家有更好的提议，欢迎评论区留言哈👏👏👏

一、构建基础列表

大致目录结构

---| src
---| libs // 通用组件
---|---| svg-icon // 矢量图组件
---|---| waterfall // 瀑布流组件
---| utils // 工具类
---| api // 接口api集合
---|---| pexels.js // 图片接口api（图片来源pexel）
---|---| assets // 静态资源
---|---| views // 视图
---|---|---| main
---|---|---|---| index.vue
---|---|---|---| components
---|---|---|---|--| list // 列表组件
---|---|---|---|--|---| index.vue // 列表展示组件 
---|---|---|---|--|---| item.vue // item 的视图组件 

1. 创建 src/libs/svg-icon/index.vue

😎😎😎小小知识点：使用 aria-hidden 属性 - 无障碍 | MDN (mozilla.org)

<template>
  <svg aria-hidden="true">
    <use :class="fillClass" :xlink:href="symbolId" :fill="color"></use>
  </svg>
</template>

<script setup>
  import { computed } from  'vue'
  const props = defineProps({
    // 显示的 svg 图标名称
    name: {
      type: String,
      required: true
    },
    // svg 图标的颜色
    color: {
      type: String
    },
    // 通过 tailwind 指定 svg 颜色的类名
    fillClass: {
      type: String
    }
  })
  // 真实显示的 svg 图标名字（拼接 #icon-）
  const symbolId = computed(() => `#icon-${props.name}`)
</script>

2. 组件注册src/libs/index.js

🍭🍭🍭PS：由于我们后面还有其他组件需要注册，所以我们可以用vite 提供的功能，进行通用组件的自动化注册，涉及到的知识点如下：

• 🍬vite 的 Glob 导入：该功能可以帮助我们在 文件系统中导入多个模块
• 🍬vue 的 defineAsyncComponent()：该方法可以创建一个 按需加载的异步组件

import { defineAsyncComponent } from 'vue'

export default {
  install(app) {
    // 获取当前路径任意文件夹下的 index.vue 文件
    const components = import.meta.glob('./*/index.vue')
    // 遍历获取到的组件模块
    for (const [key, value] of Object.entries(components)) {
     // 拼接组件注册的 name
     const componentName = 'm-' + key.replace('./', '').split('/')[0]
     // 通过 defineAsyncComponent 异步导入指定路径下的组件
     app.component(componentName, defineAsyncComponent(value))

    }
  }
}

3. vite 处理 svg 矢量图

🎈🎈🎈PS：由于vite不会处理咱们主动导入的 svg 矢量图标，所以我们需要借助 vite 的 plugin vite-plugin-svg-icons

• 安装 vite-plugin-svg-icons

npm i --save-dev vite-plugin-svg-icons@2.0.1

• vite.config.js 注册

import path, { join } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig ({
  plugins: [
    vue(),
    createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
       iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    })
  ]
})

• main.js

import mLibs from './libs' // 导入
import 'virtual:svg-icons-register' // 虚拟路径

// use 注册
createApp(App).use(mLibs).use(router).use(store).mount("#app");

3. 使用 demo.vue

<template>
  <!-- 加载更多 -->
  <m-svg-icon
    v-show="loading"
    class="w-4 h-4 mx-auto animate-spin"
    name="infinite-load"
  ></m-svg-icon>
  <!-- 反馈 -->
  <m-svg-icon
    name="feedback"
    class="w-2 h-2"
    fillClass="fill-zinc-900 dark:fill-zinc-200 group-hover:fill-main "
  ></m-svg-icon>
 ...
</template>

至此我们的svg-icon 组件就已经构建并且使用完成啦🎆🎆🎆，下一节我们再来分享~🎈🎈🎈

关于只改了一行代码哈哈哈.png