web前端最流行且易学的技术栈

语言

• TypeScript：

  • 优势：类型安全、增强 IDE 支持、适合大型项目维护。
  • 补充：使用 tsup 或 Vite 构建工具时，可以简化 TypeScript 项目的打包流程。

• JavaScript：

  • 适用场景：快速原型开发或小型项目。
  • 补充：ES6+ 特性已广泛支持，无需依赖 Babel 即可运行于现代浏览器。

框架

• Vue2 + Composition API：

  • 注意：Composition API 是 Vue3 的特性，但在 Vue2 中可以通过插件（如 @vue/composition-api）实现部分功能。
  • 推荐用于：需要兼容 IE11 的遗留系统。

• Vue3：

  • 优势：更好的性能、内置 Composition API、更小的体积。
  • 补充：推荐使用 <script setup> 语法提升开发效率。

• UniApp：

  • 用途：跨平台小程序开发（微信、支付宝、H5 等）。
  • 补充：支持 Vue3 和 TypeScript，生态逐渐完善。

包管理工具

• pnpm：

  • 特点：节省磁盘空间（硬链接）、速度快、依赖结构清晰。
  • 补充：适用于 monorepo 项目管理。

• yarn：

  • 特点：并行安装、锁定版本（yarn.lock），支持 workspace 功能。
  • 补充：Yarn Berry（v2+）引入了 Plug'n'Play 技术，进一步优化依赖管理。

构建工具

• Vite：

  • 特点：基于原生 ES 模块的构建工具，启动快，热更新迅速。
  • 推荐：Vue3 + TypeScript 项目首选。

• Rollup / Rolldown / tsup：

  • Rollup：适合库的打包。
  • Rolldown：Rust 实现的高性能替代。
  • tsup：专为 TypeScript 库设计的打包工具。

• Webpack：

  • 特点：成熟稳定，插件丰富，适合复杂项目。
  • 不足：配置较复杂，构建速度慢。

CSS 框架

• 预编译：Less

  • 优点：变量、嵌套、混合等特性。
  • 替代：Sass/SCSS 更流行，但 Less 仍广泛使用。

• 原子化：UnoCSS

  • 优势：按需生成类名，减少冗余样式。
  • 替代：Tailwind CSS，生态更成熟。

• CSS in JS：vanilla-extract.style

  • 优势：类型安全、零运行时开销。
  • 替代：styled-components（React 专用）

UI 库

• PC 端：Ant Design Vue / Element Plus

  • Ant Design Vue：与 Ant Design 设计风格一致。
  • Element Plus：Element-ui 的 Vue3 版本。

• 移动端：Vant

  • 优势：组件丰富、文档友好、支持 Vue3。

• Unstyled：Radix Vue

  • 特点：无默认样式，便于定制设计系统。

测试库

• 框架测试：Vitest

  • 优势：Vite 集成好，速度快，API 类似 Jest。
  • 替代：Jest（更成熟）

• E2E 测试：Cypress / Playwright

  • Cypress：UI 自动化测试友好。
  • Playwright：支持多浏览器、多上下文测试。

• Vue 测试：vue-test-utils

  • 用途：单元测试 Vue 组件。
  • 推荐搭配：Vitest 使用。

工具库

• 时间处理：Day.js

  • 轻量级替代 Moment.js。

• 数值计算：Big.js / BigNumber.js / Decimal.js

  • Big.js：轻量级，适合简单场景。
  • Decimal.js：功能更强大，精度更高。

• 路径匹配：Micromatch

  • 用途：文件路径通配符匹配。
  • 替代：minimatch（Node.js 常用）

• 加密：sm-crypto

  • 国密算法支持（SM2/SM3/SM4）。
  • 替代：crypto-js（通用加密库）

• 接口类型定义：unplugin-dev-proxy

  • 用途：自动生成 Dev Proxy 并同步接口类型。
  • 替代：unplugin-auto-import + unplugin-vue-components（自动导入）

• 不可变数据操作：Immer

  • 用途：简化不可变状态更新。
  • 替代：immer-vue（Vue 适配版）

代码规范

• ESLint

  • 标准化 JavaScript/TypeScript 代码质量。
  • 推荐配置：@antfu/eslint-config（集成 Vue、Prettier 等）

• eslint.config.js

  • 新一代配置方式（ESM 友好），取代 .eslintrc.js

工程规范

• Pull Request 强制规则

  • 推荐：强制通过 ESlint、TypeCheck、Test 后才允许合并。

• TypeCheck

  • 推荐：在 CI 中运行 tsc --noEmit 进行类型检查。

• Test

  • 推荐：CI 中运行 Vitest + vue-test-utils 编写的单元测试。

• Commit Message 校验

  • 工具：commitlint + husky
  • 规范：遵循 Conventional Commits