一个纯前端实现的头像生成网站

当前文章收录状态:
查询中...

今天,给大家介绍一个纯前端实现的头像生成网站。

项目介绍

vue-color-avatar —— 一款基于 Vite + Vue3 实现的矢量风格头像的生成器,你可以搭配不同的素材组件,生成自己的个性化头像。

图片[1]-一个纯前端实现的头像生成网站-明恒博客

功能特色:

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

项目截图

图片[2]-一个纯前端实现的头像生成网站-明恒博客
图片[3]-一个纯前端实现的头像生成网站-明恒博客
图片[4]-一个纯前端实现的头像生成网站-明恒博客
图片[5]-一个纯前端实现的头像生成网站-明恒博客

快速上手

本地开发

1、克隆代码

git clone https://github.com/Codennnn/vue-color-avatar.git

2、安装依赖

yarn install

3、运行项目

yarn dev

4、构建项目

yarn build

生产部署

vue-color-avatar 支持 Docker 部署,可使用 Docker 进行私有化部署。

1、直接启动容器

docker run -d -t -p 5173:5173 \
--name=vue-color-avatar \
--restart=always \
docker.io/wenyang0/vue-color-avatar:latest

2、手动构建镜像

#下载代码
git clone https://github.com/Codennnn/vue-color-avatar.git

#docker 编译
cd vue-color-avatar/
docker build -t vue-color-avatar:v1 .

#启动服务
docker run -d -t -p 5173:5173 --name vue-color-avatar --restart=always vue-color-avatar:v1

最后,打开浏览器访问服务的地址 http://serverIP:5173 即可。

© 版权声明
THE END
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=270198dipw4ko
点赞9赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容