@@ -33,28 +33,32 @@ description: 架构指南和总览
3333| 组件挂载库 | React Testing Library | React Testing Library | Vue Test Utils | React Testing Library |
3434| E2E测试 | Playwright | Playwright | Playwright | Playwright |
3535
36-
36+ - ** C端项目** :更侧重于用户体验、易用性和个性化服务,目标是吸引并留住大量最终用户,比如电子商务、新闻资讯类应用等
37+ - ** B端项目** :则更关注功能的全面性、系统的稳定性和数据的安全性,目的是帮助提高效率和管理水平,比如企业内部管理系统等
38+ - 一般来说,B端项目的用户群体较小,但对系统的稳定性和安全性要求更高,如果不是面对客户的产品,不建议专门做 UI 设计
3739- ** 框架** :各平台使用了不同的前端框架,如 Next.js、Vue、React
38- - 选择 Next.js 或者 Vue、React,取决于是否有必要进行 SSR,一般来说 C端项目(比如电子商务、新闻网站等)对 SEO 和首屏加载速度有较高要求,因此使用 Next.js 进行服务端渲染;而 B端项目(如管理系统)则更注重开发效率和用户体验 ,通常使用 React
40+ - 选择 Next.js 或者 Vue、React,取决于是否有必要进行 SSR,一般来说 C端项目对 SEO 和首屏加载速度有较高要求,因此使用 Next.js 进行服务端渲染;而 B端项目则更注重开发效率和用户体验 ,通常使用 React
3941 - Vue 在移动端项目中使用,主要是因为其轻量级和易于上手的特性,适合快速开发和迭代
4042- ** 打包工具** :大部分平台使用 RSpack 作为打包工具,但移动端 Vue 项目使用 Vite
4143 - RSPack 是基于 Rust 的高性能 Web 打包工具,并且兼容部分 Webpack 插件
4244 - Vite 是一个现代化的前端构建工具,尤其在 Vue 项目中表现出色
4345- ** UI 组件/框架** :除了B端PC端使用 Ant Design Pro 外,其他均采用 Tailwind CSS
4446 - Tailwind CSS 是一个实用优先的 CSS 框架,提供了丰富的样式类,适合快速构建响应式布局,适用于有 UI 设计规范的项目
4547 - Ant Design Pro 是一个基于 Ant Design 的企业级 UI 组件库,对B端项目提供了丰富的组件和设计规范,适合复杂的管理系统
46- - Ant Design Pro 经过改造,在原来的基础上,去除了 umi 的依赖,仅保留 Ant Design 和 Pro Components
48+ - Ant Design Pro 经过改造,在原来的基础上,去除了 umi 的依赖,仅保留 Ant Design 和 Pro Components
4749- ** 路由及模式** :对于需要特定路由器设置的平台,分别采用了 Vue Router 与 React Router,并设定了各自的 history 或 hash 模式
4850 - history 模式适用于需要干净 URL 的应用,通常用在 C端项目中
4951 - hash 模式适用于需要兼容旧浏览器的应用,通常用在 B端项目中
50- - 如果需要支持 Electron 桌面应用 和 Capacitor 移动应用,则必须使用 hash 模式
52+ - 如果需要支持 Electron 桌面应用 和 Capacitor 移动应用,则必须使用 hash 模式
5153- ** 状态管理** :React 项目使用 Zustand,Vue项目使用Pinia
5254- ** 代码质量工具** :支持 TypeScript,并广泛采用 ESLint 进行代码风格检查;同时部分项目还启用了 stylelint 和 HTML Validate。
53- - ** PWA** :持渐进式Web应用( PWA) ,提供更好的用户体验和离线支持
54- - ** 服务端渲染(SSR)** :提升 SEO 和首屏加载速度,适用于 C端 项目
55+ - ** PWA** :持渐进式 Web 应用( PWA) ,提供更好的用户体验和离线支持
56+ - ** 服务端渲染(SSR)** :提升 SEO 和首屏加载速度,适用于C端项目
5557- ** Electron** :专门针对B端项目提供桌面应用开发能力。
5658- ** Capacitor** :为移动端提供了构建跨平台原生应用的能力。
57- - ** 测试工具** :单元测试使用 Jest,组件挂载库依据所用框架不同选择 React Testing Library 或 Vue Test Utils,E2E 测试工具均为Playwright
59+ - ** 测试工具** :
60+ - 单元测试使用 Jest,组件挂载库依据所用框架不同选择 React Testing Library 或 Vue Test Utils
61+ - E2E 测试工具均为 Playwright
5862
5963## 技术运用
6064
0 commit comments