🚀 riml - me 项目文档
这是一个借助 Next.js App Router 构建的现代化网络应用程序项目，具备高效的开发流程和良好的用户体验。
🚀 快速开始
首先，你需要启动开发服务器：
npm run dev
# 或者
yarn dev
# 或者
pnpm dev
# 或者
bun dev
在浏览器中打开 http://localhost:3000 即可查看应用效果。你可以通过编辑 app/page.tsx 文件来修改页面，编辑时页面会自动更新。该项目使用了 next/font，以自动优化并加载 Geist 这种适用于网络的字体。
✨ 主要特性
- 采用 Next.js 15.2 的 App Router 构建前端应用，结合 React v19 提供强大的交互能力。
- 使用 Tailwind CSS 3.4.4 实现灵活的样式设计。
- 运用 TypeScript 5.5.4 增强代码的可维护性和类型安全性。
- 配备完善的开发工具，如 pnpm 20.1.2 作为包管理器，Biome 进行代码格式化，ESLint 进行代码检查，Vitest 作为测试框架。
📦 安装指南
前提条件
- Node.js 20.18.0
- pnpm 20.1.2
安装步骤
# 克隆代码库
git clone https://github.com/xxxxx/riml-me.git
cd riml-me
# 安装依赖项
pnpm install
启动开发服务器
# 启动开发服务器
pnpm dev
应用程序将在 http://localhost:3000 上运行。
执行测试
# 运行单元测试
pnpm test
# 查看测试覆盖率
pnpm test:coverage
代码检查与格式化
# 执行代码检查
pnpm lint
# 执行代码格式化
pnpm format
📚 详细文档
项目结构
/
├── apps/ # 应用程序代码
│ └── app/ # 主应用程序
│ ├── src/ # 源代码
│ │ ├── app/ # Next.js App Router
│ │ └── components/ # 公共组件
│ ├── public/ # 静态文件
│ └── ...
├── packages/ # 共享包
│ ├── biome-config # Biome 的配置
│ ├── eslint-config # ESLint 的配置
│ └── vitest-config # Vitest 的配置
└── ... (配置文件等)
开发规范
- 组件放置在
src/components目录下。 - 页面放置在
src/app目录下。 - 类型定义在各自文件中管理。
- 测试文件使用
.test.ts或.test.tsx作为扩展名。
🔧 技术细节
技术栈
- 前端
- Next.js 15.2 (App Router)：提供高效的路由管理和服务器端渲染能力。
- React v19：构建用户界面的核心库，提供丰富的组件化开发方式。
- Tailwind CSS 3.4.4：实用类优先的 CSS 框架，可快速构建自定义样式。
- TypeScript 5.5.4：为 JavaScript 代码添加静态类型检查，提高代码质量。
- 开发工具
- pnpm 20.1.2 (包管理器)：快速、高效的包管理工具，节省磁盘空间。
- Biome (代码格式化工具)：统一代码风格，提高代码可读性。
- ESLint (代码检查工具)：检查代码中的潜在问题，确保代码质量。
- Vitest (测试框架)：用于编写和运行单元测试，保证代码的正确性。
📄 许可证
本项目基于 MIT 许可证发布。
💡 更多信息
如需了解更多信息，请参考 Next.js 的官方文档。