分享一个 Vue3 + Vite 开发的纯前端在线头像生成网站 🥳

[coolpace]

项目链接

在线预览：https://vue-color-avatar.vercel.app

GitHub 源码：https://github.com/Codennnn/vue-color-avatar

项目介绍

这是一款矢量风格头像的生成器，你可以搭配不同的素材组件，生成自己的个性化头像。

你可能感兴趣的功能：

• 可视化组件配置栏
• 随机生成头像，有一定概率触发彩蛋
• 撤销 /还原更改
• 国际化多语言

设计资源

• 设计师：@Micah on Figma
• 素材来源：Avatar Illustration System

附言

这个项目是我学习 Vue3 之后写第一个网站，里面有一些个人认为较好的代码实践，包括 Typescript 的应用和 ESLint + Prettier 的配置，希望对你有帮助。

喜欢的话请给这个项目一个 Star ⭐ 吧～

[coolpace]

@stefanieewu [楼主回复#20]
可以这么理解，每个头像部位的选项都是一个数组定义，从数组里随机选取一个与其他部位进行组合

[est]

NFT 搞起来 2333

[Remember]

捏脸好评,可惜就是选项还是太少了,希望搞丰富一点

[shilianmlxg]

多谢大佬 可以多学亿点点东西

[tousfun]

大佬为什么初学就能做出来这么好玩的项目啊？之前有前端经验吗

[coolpace]

@Remember [楼主回复#23]
看来大家都挺喜欢这种风格的头像，我准备找设计师画一波素材

[coolpace]

@919615766 [楼主回复#25]
我的主业是前端开发

[leonleung]

用这换了个波头像

[coolpace]

@leonleung [楼主回复#28]
谢谢支持，我计划近期再更新一波头像素材，可以关注我的项目获取最新状态哦

[cond0r]

用上了 感谢楼主

[lovegoogle]

建议加上用上 GAN （生成对抗网络）随机生成各种有趣风格的图片 ^_^

[yunyuyuan]

我要是也认识一个设计朋友就好了，作为前端写的网站自己都不忍直视

[coolpace]

@lovegoogle [楼主回复#31]
赶紧查了查什么是对抗网络 🧐

[coolpace]

@yunyuyuan [楼主回复#32]
在模仿中慢慢培养审美吧哈哈

[jinzhe]

左边主界面出来滚动条有点丑

[coolpace]

@jinzhe [楼主回复#35]
正常情况是没有滚动条的，可以说下怎么复现吗？

[six6pear]

不错，很喜欢。就是现阶段素材太少，望完善。

[starxg]

很好！

[lsorrow]

胡子直接盖在嘴巴上了哈哈哈

[jinzhe]

@coolpace 直接打开就有了，macOS chrome macbook pro