技术选型 Vue 和 React 的核心区别: 1、状态管理：“单向数据流” 和 “双向绑定” 2、设计理念： React：强调 纯函数组件和和数据不可变。vue兼顾函数式和面向对象思想 如 Options API 或 Composition API 3、状态更新：vue是响应式的，react是Hooks依赖声明 4、虚拟 DOM：Vue基于 “响应式系统” 实现精准更新。React组件树级别的更新。
开发上： vue的选择相对小一些：vue2+vuex vue3+pinia ts css react选择更丰富：react+多种状态管理的库。css的方案：css in js/ css module /css预处理器/原子化css[css框架] 【】Create React App（CRA）/Vite原生支持css module 命名规范：[文件名].module.css/xxx.module.scss 使用方式：通过 import styles from './xxx.module.css' 引入 【】CSS-in-JS styled-components
构建上 webpack vs vite 【】Webpack：基于 “打包” 的构建工具， Vite：基于 “原生 ESM” 的构建工具，按需编译，无需打包 【】Webpack支持各种模块类型（JS、CSS、图片等），通过 loader 和 plugin 扩展能力极强 配置简洁，默认支持 TypeScript、JSX、CSS 等，开箱即用。 【】Webpack生态极其丰富，vite兼容 Rollup 插件,对现代前端工具的支持（TypeScript、JSX、CSS Modules、PostCSS 等），无需额外配置. 【注意*】Webpack：从设计上原生支持 CommonJS（Webpack 最初就是为 CommonJS 模块设计的），转换逻辑更成熟。 Vite 对 CommonJS 的支持情况。开发环境还是生产环境，都会将 CommonJS 模块转换为 ESM 后再进行处理。 生产环境：Vite 基于 Rollup 打包，通过 @rollup/plugin-commonjs 插件（Vite 已内置）。 so, 这会增加服务器响应时间,可能出现兼容性问题。 若依赖中存在 require(someVariable) 这类动态导入，可通过 Vite 插件（如 vite-plugin-commonjs）增强转换能力，或替换为支持 ESM 的替代库。 // vite.config.js export default { optimizeDeps: { include: ['lodash', 'some-commonjs-package'] // 强制预构建这些 CJS 模块 } };
需要考虑第三方库和整体架构的版本兼容。
