前端项目创建流程速查表#

背景#

在前端开发中，不同的技术栈，项目创建流程也不同。增加我的心智负担。本文整理了主流技术栈的统一创建流程，帮助快速启动项目。

🎯 通用创建流程#

无论选择哪种技术栈，都遵循以下通用步骤：

1. 环境准备#

1
# 检查 Node.js 版本（推荐 18+）
2
node --version
3

4
# 检查包管理器
5
npm --version    # 或 yarn --version 或 pnpm --version

2. 项目创建#

1
# 使用官方脚手架创建项目
2
<official-cli> create <project-name>
3

4
# 进入项目目录
5
cd <project-name>
6

7
# 安装依赖
8
npm install  # 或 yarn 或 pnpm install
9

10
# 启动开发服务器
11
npm run dev  # 或 yarn dev 或 pnpm dev

3. 项目配置#

🔧 配置开发工具（ESLint、Prettier）
📁 调整目录结构
⚙️ 设置环境变量
📝 编写 README.md

📦 主流技术栈创建命令#

React 生态系统#

Create React App (CRA)#

1
# 创建项目
2
npx create-react-app my-app
3
cd my-app
4
npm start
5

6
# TypeScript 版本
7
npx create-react-app my-app --template typescript

Vite + React#

1
# 创建项目
2
npm create vite@latest my-react-app -- --template react
3
cd my-react-app
4
npm install
5
npm run dev
6

7
# TypeScript 版本
8
npm create vite@latest my-react-app -- --template react-ts

Next.js#

1
# 创建项目
2
npx create-next-app@latest my-nextjs-app
3
cd my-nextjs-app
4
npm run dev
5

6
# 带 TypeScript
7
npx create-next-app@latest my-nextjs-app --typescript
8

9
# 带 App Router
10
npx create-next-app@latest my-nextjs-app --app

Vue 生态系统#

Vue CLI#

1
# 安装 CLI（全局）
2
npm install -g @vue/cli
3

4
# 创建项目
5
vue create my-vue-app
6
cd my-vue-app
7
npm run serve

Vite + Vue#

1
# 创建项目
2
npm create vue@latest my-vue-app
3
cd my-vue-app
4
npm install
5
npm run dev

Nuxt.js#

1
# 创建项目
2
npx nuxi@latest init my-nuxt-app
3
cd my-nuxt-app
4
npm install
5
npm run dev

Angular 生态系统#

Angular CLI#

1
# 安装 CLI（全局）
2
npm install -g @angular/cli
3

4
# 创建项目
5
ng new my-angular-app
6
cd my-angular-app
7
ng serve

其他流行框架#

Svelte#

1
# SvelteKit（推荐）
2
npm create svelte@latest my-svelte-app
3
cd my-svelte-app
4
npm install
5
npm run dev
6

7
# 经典 Svelte
8
npx degit sveltejs/template my-svelte-app
9
cd my-svelte-app
10
npm install
11
npm run dev

Astro#

1
# 创建项目
2
npm create astro@latest my-astro-app
3
cd my-astro-app
4
npm install
5
npm run dev
6

7
# 使用模板
8
npm create astro@latest my-astro-app -- --template blog

Remix#

1
# 创建项目
2
npx create-remix@latest my-remix-app
3
cd my-remix-app
4
npm install
5
npm run dev

Solid.js#

1
# 创建项目
2
npx degit solidjs/templates/js my-solid-app
3
cd my-solid-app
4
npm install
5
npm run dev
6

7
# TypeScript 版本
8
npx degit solidjs/templates/ts my-solid-app

🛠️ 构建工具对比#

工具	特点	适用场景	创建命令
Vite	⚡ 极速启动	现代项目首选	`npm create vite@latest`
Webpack	🔧 高度配置	复杂项目配置	集成在各框架CLI中
Parcel	🎯 零配置	快速原型	`npx parcel index.html`
Rollup	📦 库开发	组件库打包	手动配置

🎨 CSS 方案选择#

Tailwind CSS#

1
# Vite 项目
2
npm install -D tailwindcss postcss autoprefixer
3
npx tailwindcss init -p
4

5
# Next.js 自动配置
6
npx create-next-app@latest my-app -- --tailwind

Styled Components#

1
# React
2
npm install styled-components
3
npm install --save-dev @types/styled-components

CSS Modules#

1
# 大多数脚手架默认支持
2
# 文件命名：Component.module.css

📋 项目配置模板#

package.json 脚本标准化#

1
{
2
  "scripts": {
3
    "dev": "启动开发服务器",
4
    "build": "构建生产版本",
5
    "preview": "预览生产版本",
6
    "test": "运行测试",
7
    "lint": "代码检查",
8
    "format": "代码格式化"
9
  }
10
}

环境变量配置#

1
NEXT_PUBLIC_API_URL=http://localhost:3001
2
DATABASE_URL=postgresql://...
3

4
# .env.example（提交到版本控制）
5
NEXT_PUBLIC_API_URL=your_api_url_here
6
DATABASE_URL=your_database_url_here

Git 配置#

1
# 初始化 Git
2
git init
3
git add .
4
git commit -m "feat: initial commit"
5

6
# 添加远程仓库
7
git remote add origin https://github.com/username/repo.git
8
git push -u origin main

🔧 开发工具配置#

ESLint + Prettier#

1
# 安装依赖
2
npm install --save-dev eslint prettier eslint-config-prettier
3

4
# 配置文件
5
echo '{"extends": ["next", "prettier"]}' > .eslintrc.json
6
echo '{"semi": true, "singleQuote": true, "trailingComma": "es5"}' > .prettierrc

TypeScript#

1
# 添加到现有项目
2
npm install --save-dev typescript @types/node
3

4
# 生成配置文件
5
npx tsc --init

Husky + lint-staged#

1
# 安装
2
npm install --save-dev husky lint-staged
3

4
# 配置 Git hooks
5
npx husky-init && npm install

🚀 部署配置速查#

Vercel#

1
# 安装 CLI
2
npm install -g vercel
3

4
# 部署
5
vercel --prod

Netlify#

1
# 安装 CLI
2
npm install -g netlify-cli
3

4
# 部署
5
netlify deploy --prod

GitHub Pages#

1
name: Deploy to GitHub Pages
2
on:
3
  push:
4
    branches: [ main ]
5
jobs:
6
  deploy:
7
    runs-on: ubuntu-latest
8
    steps:
9
      - uses: actions/checkout@v4
10
      - uses: actions/setup-node@v4
11
      - run: npm install
12
      - run: npm run build
13
      - uses: peaceiris/actions-gh-pages@v3
14
        with:
15
          github_token: ${{ secrets.GITHUB_TOKEN }}
16
          publish_dir: ./dist

📊 技术选型决策树#

想要选择合适的技术栈？遵循以下决策路径：

静态网站 → Astro、Next.js (SSG)
SPA 应用 → React/Vue + Vite
全栈应用 → Next.js、Nuxt.js
快速原型 → Vite + 任何框架
企业级 → Angular、React + 成熟生态

🎯 最佳实践总结#

✅ 推荐做法#

统一包管理器：项目内保持一致（npm/yarn/pnpm）
版本锁定：提交 package-lock.json 或 pnpm-lock.yaml
环境隔离：使用 .env 文件管理环境变量
代码规范：配置 ESLint + Prettier + Husky
类型安全：优先选择 TypeScript

⚠️ 避免的坑#

全局依赖冲突：避免全局安装过多CLI工具
版本不一致：团队统一 Node.js 和包管器版本
配置过度：初期保持简单，按需添加配置
缓存问题：遇到奇怪问题先清除 node_modules

🔖 快速参考#

最常用的创建命令#

1
# React 项目（推荐）
2
npm create vite@latest my-app -- --template react-ts
3

4
# Vue 项目（推荐）
5
npm create vue@latest my-app
6

7
# Next.js 项目（推荐）
8
npx create-next-app@latest my-app --typescript
9

10
# Astro 项目（推荐）
11
npm create astro@latest my-app

一键创建脚本#

1
#!/bin/bash
2
echo "选择技术栈："
3
echo "1) React (Vite)"
4
echo "2) Vue (Vite)"
5
echo "3) Next.js"
6
echo "4) Nuxt.js"
7
echo "5) Astro"
8

9
read -p "输入选择 (1-5): " choice
10
read -p "项目名称: " project_name
11

12
case $choice in
13
  1) npm create vite@latest $project_name -- --template react-ts ;;
14
  2) npm create vue@latest $project_name ;;
15
  3) npx create-next-app@latest $project_name --typescript ;;
16
  4) npx nuxi@latest init $project_name ;;
17
  5) npm create astro@latest $project_name ;;
18
  *) echo "无效选择" ;;
19
esac
20

21
echo "项目创建完成！"
22
echo "下一步: cd $project_name && npm install && npm run dev"

📚 延伸阅读#

通过这个速查表，您可以快速在不同技术栈间切换，大大减少记忆负担，专注于核心开发工作！🚀