这是一个纯前端实现的头像生成网站可以生成矢量风格头像搭配不同的素材组件生成自己的个性头像。
**地址:**https://github.com/Codennnn/vue-color-avatar
在线预览:
https://vue-color-avatar.leoku.dev
介绍:这是一款矢量风格头像的生成器,你可以搭配不同的素材组件,生成自己的个性化头像。
你可能感兴趣的功能:
- 可视化组件配置栏
- 随机生成头像,有一定概率触发彩蛋
- 撤销/还原更改
- 国际化多语言
- 批量生成多个头像
该项目使用 Vue3
+ Vite
进行开发。
# 1. 克隆项目至本地
git clone https://github.com/Codennnn/vue-color-avatar.git
# 2. 安装项目依赖
yarn install
# 3. 运行项目
yarn dev
第一步
第二部:
PS D:\Vue Color Avatar Vue Color 头像\vue-color-avatar> yarn install
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @vitejs/plugin-vue@2.3.4" has incorrect peer dependency "vite@^2.5.10".
warning Workspaces can only be enabled in private projects.
[4/4] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 29.63s.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
PS D:\Vue Color Avatar Vue Color 头像\vue-color-avatar>
第三步
PS D:\Vue Color Avatar Vue Color 头像\vue-color-avatar> yarn dev
yarn run v1.22.19
$ vite
VITE v3.2.10 ready in 467 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
第四步
给大家看看我整的,真挺有意思的:
Docker 快速部署
你可以直接使用我已经构建好的镜像来运行。
docker run -d -t -p 5173:8080 \
--name=vue-color-avatar \
--restart=always \
docker.io/wenyang0/vue-color-avatar:latest
或者,如果您愿意,也可以自己手动编译。
#下载代码
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:8080 --name vue-color-avatar --restart=always vue-color-avatar:v1