纯前端生成设置头像 - 基于Vue3、Ts、Vite _前端

开头最近要研究有什么新奇的产品和项目，发现一个网站很有意思，可以纯前端一键随机生成头像，刚好他们的代码是开源，并且基于vue3，我想开源拿出来给大家分享。
效果：

开始项目本身基于vue3和vite开发，github地址是：https://github.com/Codennnn/vue-color-avatar,启动步骤：
git clone https://github.com/Codennnn/vue-color-avatar.gityarn yarn dev访问：http://localhost:5000/即可访问项目

文章插图

项目布局本身分为四个大的区域：
HeaderPlayGroundFooterSider国际化使用的是vue-i18n

import { createI18n } from 'vue-i18n'import { Locale } from '@/enums'import en from './locales/en'import zh from './locales/zh'const messages = { en, zh }const [locale, fallbackLocale] = /^zhb/.test(window.navigator.language)? [Locale.ZH, Locale.EN]: [Locale.EN, Locale.ZH]export default createI18n({locale,fallbackLocale,messages,})

讲重点更多的项目细节，大家可以clone项目下来看，我们今天主要讲这个随机生成头像的原理。
最重要的一段代码，当我们点击随机生成的时候会触发下面这个逻辑：