一個純前端實現的頭像生成網站

Java陈序员發表於2024-08-02
前端網站

大家好，我是 Java陳序員。

今天，給大家介紹一個純前端實現的頭像生成網站。

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

vue-color-avatar —— 一款基於 Vite + Vue3 實現的向量風格頭像的生成器，你可以搭配不同的素材元件，生成自己的個性化頭像。

功能特色：

  • 視覺化元件配置欄
  • 隨機生成頭像，有一定機率觸發彩蛋
  • 撤銷/還原更改
  • 國際化多語言
  • 批次生成多個頭像

專案截圖

快速上手

本地開發

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

3、最後，開啟瀏覽器訪問服務的地址 http://serverIP:5173 即可。

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章