一个功能全面的 Vue 3 应用程序,允许用户动态生成带有可自定义块的 GitHub 个人资料 README 文件。
🌟 功能特性
- 动态生成 GitHub 个人资料 README
- 可自定义和拖拽的个人资料块
- 支持浅色和深色主题
- 多语言支持(中英文)
- 实时预览
🚀 演示地址
在线演示: progen.meilingluo.cn
📁 项目结构
MeiProGen/
├── public/
│ ├── _redirects
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ │ └── BlockConfigs/
│ ├── router/
│ ├── stores/
│ ├── App.vue
│ └── main.ts
├── README.md
├── README-ZH.MD
└── package.json
🛠️ 技术栈
- Vue 3 – 渐进式 JavaScript 框架
- TypeScript – 类型化的 JavaScript
- Pinia – Vue 状态管理
- Vite – 下一代前端工具链
- Marked – Markdown 解析器
🏗️ 安装
# 克隆仓库
git clone https://github.com/whatp/MeiProGen.git
# 进入项目目录
cd MeiProGen
# 安装依赖
npm install
▶️ 使用
开发环境
# 启动开发服务器
npm run dev
生产环境
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
☁️ 部署
Vercel
- 登录 Vercel 并创建新项目
- 链接您的 GitHub 仓库并配置构建设置:
- 构建命令:
npm run build - 输出目录:
dist
- 使用默认设置部署项目
Cloudflare Pages
有关部署到 Cloudflare Pages 的详细说明,请参阅我们的 中文部署指南,其中包含 GitHub 集成和手动部署方法的全面步骤。
Vue Router 的重要配置:
为确保 Vue Router 在 Cloudflare Pages 上的路由功能正常,已在 public 目录中添加了 _redirects 文件,内容如下:
/* /index.html 200
此配置对于使用 Vue Router 历史模式的单页应用程序至关重要。
👥 贡献者
📈 Star 趋势
🤝 贡献
欢迎贡献!您可以通过以下方式帮助我们:
- 给仓库加星 ⭐
- Fork 并在本地克隆 🍴
- 为错误创建问题或提出新功能 🐛
- 提交拉取请求以提交更改 🎉
📄 许可证
本项目采用 MIT 许可证 – 详见 LICENSE 文件。
🙏 致谢
- 感谢所有帮助改进此项目的贡献者
- 受到 Vue.js 和 GitHub 社区的启发