前端技术

前端模块记录 Web 应用从脚手架、组件开发、工程化到性能优化的常用实践。内容以 Vue 技术栈为主，同时补充 TypeScript、Tailwind CSS、构建工具和交付质量相关经验。

模块导航

主题	内容	适用场景
Vue 2 项目搭建	Vue CLI、项目结构、常用配置、迁移建议	维护存量 Vue 2 项目或搭建后台管理系统
Vue 3 项目搭建	create-vue、Vite、Composition API、目录规范	新项目初始化和现代 Vue 开发
TypeScript 集成	基础类型、组件类型、接口设计、实用泛型	提升代码可维护性和重构安全性
Tailwind CSS	Tailwind 3/4 安装、配置、组件封装思路	快速构建统一视觉风格
Vue CLI 性能优化	Webpack 分包、压缩、缓存、构建优化	传统 Vue CLI 项目优化
Vite 性能优化	依赖预构建、懒加载、Rollup 分包、产物分析	Vite 项目开发体验和构建优化
前端工程化	规范、测试、监控、CI、发布流程	团队项目治理和长期维护

项目结构建议

text

src/
  api/                 # 接口请求与后端契约
  assets/              # 图片、字体、全局静态资源
  components/          # 通用组件
  composables/         # 组合式逻辑
  layouts/             # 页面布局
  router/              # 路由配置
  stores/              # Pinia/Vuex 状态管理
  styles/              # 全局样式、变量、Tailwind 入口
  utils/               # 通用工具函数
  views/               # 页面级组件

开发质量清单

组件职责单一：页面负责组织数据和布局，基础组件负责展示和交互。
接口类型明确：后端响应结构、分页参数、枚举状态都要有类型定义。
异步状态完整：加载中、空数据、错误重试、权限不足都要有明确 UI。
样式可复用：优先沉淀设计变量、工具类和组件变体，减少一次性样式。
构建可分析：保留 bundle 分析方式，避免依赖体积无感增长。
发布可回滚：构建产物、环境变量、接口地址、版本号要能追踪。

常见决策建议

Vue 2 还是 Vue 3

新项目优先 Vue 3。Vue 2 更适合维护已有业务或依赖旧生态的管理后台。若存量项目需要长期维护，应逐步替换高风险依赖，并规划迁移到 Vue 3 的路径。

Vue CLI 还是 Vite

新项目优先 Vite。Vite 在开发启动、热更新和现代构建体验上更轻量。Vue CLI 项目如果已经稳定运行，可以先做构建优化和依赖治理，再评估迁移成本。

CSS 方案怎么选

业务系统可以采用 Tailwind CSS 配合少量组件级样式；复杂主题系统可以补充 CSS 变量；公共组件库则需要更稳定的设计 token 和样式 API。

交付前检查

bash

npm run lint
npm run test
npm run build

如果项目没有配置对应命令，也应至少完成类型检查、关键页面自测、构建验证和浏览器兼容性检查。

前端技术 ​

模块导航 ​

推荐学习路径 ​

项目结构建议 ​

开发质量清单 ​

常见决策建议 ​

Vue 2 还是 Vue 3 ​

Vue CLI 还是 Vite ​

CSS 方案怎么选 ​

交付前检查 ​