Mini Base 项目

一个基于uni-app技术栈的跨平台应用模板，提供清晰的项目结构和完整的功能实现，支持多端部署（H5、微信小程序、支付宝小程序等）。

技术栈

项目采用了最新的前端技术栈，以下是主要依赖及其版本：

核心框架

• uni-app: 3.0.0 - 基于Vue.js的跨平台应用开发框架
• Vue: 3.4.21 - 用于构建用户界面的JavaScript库
• TypeScript: 5.9.2 - 为JavaScript添加类型系统
• Pinia: 3.0.3 - Vue生态系统中的状态管理方案
• Vue I18n: 11.1.12 - Vue的国际化解决方案

UI组件库

• wot-design-uni: 1.12.4 - 专为uni-app打造的UI组件库
• UnoCSS: 66.5.1 - 高性能、原子化的CSS引擎

开发工具

• Vite: 7.1.5 - 下一代前端构建工具
• vue-tsc: 3.0.6 - Vue的TypeScript类型检查工具
• Sass: 1.78.0 - CSS预处理器

项目特点

💡 代码规范严谨，架构清晰

⚡️ 开箱即用，无需复杂配置

🛠️ 丰富的组件和主题配置

📋 自动化的开发流程

🔧 完善的类型支持

🎯 多端适配，一次编写多处运行

🌐 支持国际化多语言

环境准备

确保你的环境满足以下要求：

• NodeJS: >=18.0.0，推荐 20.0.0 或更高
• pnpm: >= 8.0.0

安装与启动

克隆项目

# 克隆代码库
https://github.com/你的用户名/mini_base.git
cd mini_base

安装依赖

pnpm install

启动开发服务器

开发不同平台的应用，使用不同的命令：

H5平台

npm run dev:h5
# 或
pnpm dev:h5

微信小程序

npm run dev:mp-weixin
# 或
pnpm dev:mp-weixin

支付宝小程序

npm run dev:mp-alipay
# 或
pnpm dev:mp-alipay

更多平台请查看 package.json 中的 scripts 部分。

构建生产版本

H5平台

npm run build:h5
# 或
pnpm build:h5

微信小程序

npm run build:mp-weixin
# 或
pnpm build:mp-weixin

构建后的文件将输出到 dist/build/ 目录下。

项目结构

src/
├── App.vue                # 应用入口组件
├── main.ts                # 应用入口文件
├── components/            # 公共组件
│   ├── h-navbar/          # 导航栏组件
│   └── h-tabbar/          # 底部标签栏组件
├── pages/                 # 页面组件
│   ├── home/              # 首页
│   └── user/              # 用户页面
├── store/                 # Pinia状态管理
│   ├── index.ts           # store入口文件
│   └── modules/           # store模块
├── static/                # 静态资源
├── manifest.json          # 应用配置文件
├── pages.json             # 页面路由配置
├── env.d.ts               # TypeScript类型声明
└── uni.scss               # 全局样式文件

核心功能

1. 跨平台适配

基于uni-app框架，一套代码可以同时运行在H5、微信小程序、支付宝小程序等多个平台。

2. 状态管理

使用Pinia进行状态管理，结合 pinia-plugin-unistorage 插件实现数据持久化。

3. UI组件

集成了 wot-design-uni 组件库，提供丰富的UI组件，同时使用UnoCSS实现高效的样式管理。

4. 国际化支持

集成Vue I18n，支持多语言切换。

5. 路由管理

通过 pages.json 配置应用路由，支持TabBar、导航栏等配置。

使用说明

页面开发

在 pages/ 目录下创建新的页面文件夹，包含 .vue 文件和相关资源。然后在 pages.json 中注册页面路由。

组件开发

在 components/ 目录下创建可复用的组件，支持全局和局部引入。

状态管理

在 store/modules/ 目录下创建store模块，然后在 store/index.ts 中导出。

样式管理

项目使用Sass和UnoCSS进行样式管理，支持原子化CSS和自定义主题。

开发规范

代码规范

项目使用TypeScript进行开发，遵循Vue官方推荐的编码规范，确保代码质量和可维护性。

提交规范

推荐使用以下提交信息格式：

<type>(<scope>): <subject>

其中type可以是：

• feat: 新功能
• fix: 修复bug
• docs: 文档变更
• style: 格式调整，不影响代码功能
• refactor: 代码重构，不添加新功能或修复bug
• test: 添加或修改测试代码
• chore: 构建过程或辅助工具变动

许可证

项目基于MIT许可证开源。

致谢

感谢所有为项目做出贡献的开发者。如有任何问题或建议，欢迎提交Issue或Pull Request。

祝您使用愉快！🎉