跳到主要内容

项目脚手架

本文提供常用的项目起始模板，帮助开发者快速搭建项目框架。

Web应用模板​

1. React 单页应用​

# 使用 Create React App
npx create-react-app my-app --template typescript

# 使用 Vite
npm create vite@latest my-app -- --template react-ts

包含功能：​

  • TypeScript 支持
  • 路由配置
  • 状态管理
  • UI组件库
  • 测试框架
  • 构建优化

2. Next.js 应用​

# 创建 Next.js 项目
npx create-next-app@latest my-app --typescript --tailwind --eslint

包含功能：​

  • App Router
  • API Routes
  • 静态生成
  • 服务端渲染
  • 样式解决方案
  • SEO优化

后端API模板​

1. Node.js Express API​

# 创建项目目录
mkdir my-api && cd my-api

# 初始化项目
npm init -y

# 安装依赖
npm install express typescript ts-node @types/node @types/express

目录结构：​

my-api/
├── src/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   └── app.ts
├── tests/
├── package.json
└── tsconfig.json

2. NestJS API​

# 安装 NestJS CLI
npm i -g @nestjs/cli

# 创建新项目
nest new my-api

包含功能：​

  • 模块化架构
  • 依赖注入
  • 中间件支持
  • 数据库集成
  • 认证授权
  • API文档

全栈应用模板​

1. MERN Stack​

# 创建项目目录
mkdir mern-app && cd mern-app

# 创建前端
npx create-react-app client --template typescript

# 创建后端
mkdir server && cd server
npm init -y

目录结构：​

mern-app/
├── client/          # React前端
├── server/          # Express后端
└── docker-compose.yml

2. T3 Stack​

# 创建新项目
npm create t3-app@latest

包含功能：​

  • Next.js
  • tRPC
  • Prisma
  • NextAuth.js
  • Tailwind CSS

移动应用模板​

1. React Native​

# 使用 Expo
npx create-expo-app my-app

# 使用 React Native CLI
npx react-native init MyApp --template react-native-template-typescript

包含功能：​

  • 导航系统
  • 状态管理
  • UI组件库
  • 原生模块
  • 热重载

2. Flutter​

# 创建新项目
flutter create my_app

包含功能：​

  • 材料设计
  • 状态管理
  • 路由系统
  • 网络请求
  • 本地存储

最佳实践​

1. 项目配置​

  • 使用 TypeScript
  • 配置代码规范
  • 设置 Git 规范
  • 添加必要文档
  • 配置 CI/CD

2. 开发流程​

  • 版本控制
  • 分支管理
  • 代码审查
  • 自动化测试
  • 持续部署

相关资源​