Github项目：卡通头像生成器
<p>这是一个纯前端实现的头像生成网站可以生成矢量风格头像搭配不同的素材组件生成自己的个性头像。</p><p>**地址：**https://github.com/Codennnn/vue-color-avatar</p>
<h2>在线预览：</h2>
<p><code>https://vue-color-avatar.leoku.dev</code></p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmxXu3755tHZ6GjjXN13Qw49PSHY6pkFMk3ynPKcZaqHftic5Czib2rsiaw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>介绍：这是一款矢量风格头像的生成器，你可以搭配不同的素材组件，生成自己的个性化头像。</h2>
<p>你可能感兴趣的功能：</p>
<ul>
<li>可视化组件配置栏</li>
<li>随机生成头像，有一定概率触发彩蛋</li>
<li>撤销/还原<em>更改</em></li>
<li>国际化多语言</li>
<li>批量生成多个头像</li>
</ul>
<h2>该项目使用 <code>Vue3</code> + <code>Vite</code> 进行开发。</h2>
<pre><code># 1. 克隆项目至本地
git clone https://github.com/Codennnn/vue-color-avatar.git
# 2. 安装项目依赖
yarn install
# 3. 运行项目
yarn dev
</code></pre>
<p>第一步</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmWyy51BLaicuRk1icHt6gtnYz2tRhicHtPVWVroLQZbSv8vHPQdeH9WNLw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>第二部：</p>
<pre><code>PS D:\Vue Color Avatar Vue Color 头像\vue-color-avatar> yarn install
yarn install v1.22.19
Resolving packages...
Fetching packages...
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.
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>
</code></pre>
<h3>第三步</h3>
<pre><code>PS D:\Vue Color Avatar Vue Color 头像\vue-color-avatar> yarn dev
yarn run v1.22.19
$ vite
VITE v3.2.10ready in 467 ms
➜Local: http://localhost:5173/
➜Network: use --host to expose
</code></pre>
<h3>第四步</h3>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJml5rEjcxmcUJCOr4X0iaPtlkLXbctjwcpVpKK6BUVyiaOZ0xzUNLUJicrA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>给大家看看我整的，真挺有意思的：</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmDvicjhgvzibzbynNtScdWwReReHqZMU0m1P0b7ibbY2LBJRjbwIMtI8QQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmW5FicZczUlVI70eCNV3SxAibsJicW5tV2r0c3jsf8pPm5EiacRHxybogTw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmwUddaPP7zVyiay0sgQibCId832R9hiaNlMrMoDDG8WfKkBc4RRhJe2Rcg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/HmwpFjVN6NtCj2kKfgicn5XFeibwWf9vJmGiaA7Uxq4wOYqaH2KSny0fmwv8k9YQqINvMqKsekuREC7h8XiaVk7Q4w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h3>Docker 快速部署</h3>
<h3>你可以直接使用我已经构建好的镜像来运行。</h3>
<pre><code>docker run -d -t -p 5173:8080 \
--name=vue-color-avatar \
--restart=always \
docker.io/wenyang0/vue-color-avatar:latest
</code></pre>
<p>或者，如果您愿意，也可以自己手动编译。</p>
<pre><code>#下载代码
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
</code></pre>
页:
[1]