【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略

序言

在上一篇文章中，我们如同掌握神奇魔法的工匠🔮，借助自动化的精妙技艺，成功将.svg 文件转化为 SVG Vue 组件，为组件库的宏伟蓝图添上浓墨重彩的一笔✨。如今，琳琅满目的 icon 组件已在我们手中，然而，它们能否在复杂多变的项目场景中稳健运行？怎样才能在项目里便捷调用，实现高效的全局注册？这些问题亟待解决🧐。接下来，让我们深度探索 icon 组件的测试、使用以及全局注册的实现路径，充分释放组件库的强大效能，让 icon 组件在项目中绽放独特光芒🌈。

测试

此前我们已了解到，play目录堪称组件测试的专属舞台🎉。要在这个舞台上看到 icon 组件的精彩呈现，操作并不复杂。只需在play/src/App.vue文件中引入我们的图标组件，随后运行npm run dev指令，就能迅速目睹刚开发好的组件，就像揭开神秘礼物的面纱一般😎。具体代码如下：

html 复制代码

<script setup lang="ts">
import Icon from '@nova-ui/components/icon/src/icon.vue'
</script>

<template>
  <div>
    <Icon name="Plus" color="red" size="50px"></Icon>
  </div>
</template>

<style scoped></style>

然而，当我们满怀期待地看到图标出现在页面上时，却发现样式并未生效😕。这是为何呢？经过一番探寻，原来是因为我们还需在play/src/main.ts文件中引入packages/theme-chalk/src/index.scss文件，就如同为一场表演准备好合适的舞台布景一样重要🧐。代码如下：

ts 复制代码

import { createApp, Plugin } from 'vue'
import App from './App.vue'
import '@nova-ui/theme-chalk/src/index.scss'
const app = createApp(App)
app.mount('#app')

当完成这一关键步骤后，样式便能正常呈现，图标瞬间变得绚丽夺目，展现出应有的魅力😃。

vue使用安装实现

在实际项目开发的广袤天地中，手动逐个导入组件的方式犹如步行穿越沙漠，效率低下，而采用插件的方式进行注册使用，则如同搭乘高速列车，便捷高效得多👍。接下来，让我们运用ts语言，打造实现组件注册的强大函数🧐。考虑到这个函数具有广泛的通用性，绝非仅为某一个组件服务，因此，我们在packages/utils目录下单独新增install.ts文件，为这个函数搭建专属的 "工作间"😎。具体代码如下：

ts 复制代码

import { App, Component, DefineComponent, Plugin } from 'vue'

export type SFCWithInstall<T> = T & Plugin
export const withInstall = <T extends Component | DefineComponent>(component: T) => {
  (component as SFCWithInstall<T>).install = (app: App) => {
    const { name } = (component as unknown as { name: string })
    app.component(name, component)
  }
  return component as SFCWithInstall<T>
}

在这里，withInstall函数的作用是为传入的组件添加一个install方法，这个方法能将组件便捷地注册到 Vue 应用中。它接收一个类型为T的组件，T可以是Component或者DefineComponent类型。函数内部首先将传入的组件强制转换为SFCWithInstall<T>类型，然后为其添加install方法。在install方法中，通过解构从组件中提取出name属性，接着使用 Vue 应用实例app的component方法，将组件以其自身名称注册到 Vue 应用中。这样，任何经过withInstall函数处理的组件，都具备了通过install方法在 Vue 应用中全局注册的能力，极大地简化了组件注册流程，提升了开发效率。

随后，我们在packages/components/icon目录下新增index.ts文件，它就像一个智能的 "管家"，作为组件的入口文件，负责整合组件，并最终实现组件的顺畅导出😃。代码如下：

ts 复制代码

import { withInstall } from '@nova-ui/utils'
import Icon from './src/icon.vue'

export const NIcon = withInstall(Icon)
export default NIcon
export * from './src/icon'

declare module 'vue' {
  export interface GlobalComponents {
    NIcon: typeof NIcon
  }
}

其中declare这段是一个类型声明模块扩充的代码块，让其可以在模版中被解析。在 TypeScript 中，当我们想要为已有的模块（这里是 vue 模块）添加额外的类型定义时，就可以使用这种方式。

随着组件库的不断发展壮大，未来必然会容纳众多组件😄。为了让这些组件的使用更加便捷，我们在packages/components目录下再新增一个index.ts文件，它将化身为组件库的 "总枢纽"，作为组件的总入口文件，承担起导入导出所有组件的重任🧐。

最后，在play/src/main.ts文件中，我们只需简单操作，使用一下组件，就能在项目中直接调用它们，这种便捷性极大地提升了开发效率，让开发过程更加流畅，仿佛为我们的开发之旅装上了加速器😎。具体代码如下：

ts 复制代码

import { createApp, Plugin } from 'vue'
import App from './App.vue'

import * as components from '@nova-ui/components'
import '@nova-ui/theme-chalk/src/index.scss'

const app = createApp(App)

for (const key in components) {
  if (Object.prototype.hasOwnProperty.call(components, key)) {
    if (key.startsWith('N')) {
      const element = components[key as keyof typeof components]
      app.use(element as Plugin<[]>)
    }
  }
}

app.mount('#app')

如此一来，我们便可以轻松地在项目中使用组件，例如：

ts 复制代码

<script setup lang="ts"></script>

<template>
  <div>
    <NIcon name="Plus" size="30" color="red" ></NIcon>
  </div>
</template>

<style scoped></style>

今后，当我们开发其他组件时，均可参照这一套成熟的流程进行操作，不仅省心省力，还能确保开发的规范性和高效性，为我们的组件库开发工作带来极大的便利😁。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。

诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我
感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：https://github.com/gmingchen/nova-ui

基于 Vue3 + Element-plus 管理后台基础功能框架

预览：https://admin.gumingchen.icu

Github：https://github.com/gmingchen/agile-admin

Gitee：https://gitee.com/shychen/agile-admin

基础版后端：https://github.com/gmingchen/java-spring-boot-admin

文档：http://admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统

预览：https://chatterbox.gumingchen.icu/

Github：https://github.com/gmingchen/chatterbox

Gitee：https://gitee.com/shychen/chatterbox

基于 node 开发的后端服务：https://github.com/gmingchen/node-server