React_TS 学习笔记(1-1)开始准备环境
- 2026-03-24 18:57:52
# 准备环境
- 核心元素
**vite 7\react19\ts\zustand 5\React Router\iconfont\ant-design 6\i18next、react-i18next\axios\pnpm\sass\prettier\tailwindcss**
- 边缘元素
**js-cookie、@types/js-cookie、localforage、crypto-js、gm-crypt、logicflow 2、echarts**
**animate.css、nprogress、qs、Polyfill、Babel、vite-plugin-obfuscator、uuid、chalk**
**react-markdown、tiptap**
# 1、项目构建工具选择
- vite
- [官网文献](https://react.docschina.org/learn/build-a-react-app-from-scratch#step-1-install-a-build-tool)
- [vite（建议）](https://cn.vite.dev/guide/#scaffolding-your-first-vite-project)
- [rolldown-vite（会有依赖兼容问题）](https://cn.vite.dev/guide/rolldown.html)
# 2、全局状态管理库选择
- [官网文献](https://react.docschina.org/learn/passing-data-deeply-with-context)
- [redux](https://react-redux.js.org/)
- [zustand](https://zustand-demo.pmnd.rs/)
# 3、路由页面管理选择
- [React Router](https://reactrouter.com/start/framework/installation)
# 4、项目图标管理库选择
- [iconfont](https://www.iconfont.cn/)
# 5、项目组件库选择
- [ant design](https://ant.design/docs/react/introduce-cn)
- [element react](https://elemefe.github.io/element-react/#/zh-CN/quick-start)
# 6、国际化选择
- [react-i18next](https://react.i18next.com/)
- [i18next](https://www.i18next.com/)
# 7、开发工具选择
- 参考文件内的介绍【AI前端开发工程师计划/react+ts学习笔记/项目实战开发学习笔记/0-2 开发工具选择.md】
# 8、http通信选择
- [axios](https://axios-http.com/zh/docs/intro)
# 9、浏览器缓存存储选择
- [js-cookie](https://www.npmjs.com/package/@types/js-cookie)
- [localforage](https://localforage.docschina.org/)
# 10、路由跳转动画库选择
- [nprogress](https://www.npmjs.com/package/nprogress)
# 11、页面动画库选择
- [npm包地址](https://www.npmjs.com/package/animate)
- [官方地址](https://animate.style/)
# 12、url参数解析，json串转换选择
- [qs](http://npmjs.com/package/qs)
# 13、不同组件（字面意义）间的通信插件选择
- 暂无
# 14、css编译器选择
- [sass](https://www.sass.hk)
- [less](http://lesscss.cn/)
# 15、npm依赖安装工具
- [pnpm](https://pnpm.io/zh/installation)
# 16、代码混淆工具
- vite代码混淆
- [vite-plugin-obfuscator](https://www.npmjs.com/package/vite-plugin-obfuscator)
# 17、样式库工具
- 公用样式库 tailwindcss
- [tailwindcss](https://tailwindcss.com/docs/installation/using-vite)
# 18、tsx\jsx兼容插件
- tsx工具 @vitejs/plugin-vue-jsx
- [@vitejs/plugin-vue-jsx](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx)
# 19、【uuid】前端生成唯一uuid插件
- [uuid插件 npm地址](https://www.npmjs.com/package/uuid)
- [js内部Crypto对象](https://developer.mozilla.org/zh-CN/docs/Web/API/Crypto)
- 替代方案：可以使用时间戳或时间戳+随机字符
- 参考代码地址：src/utils/index.ts 内 函数 getMathRandomId / getTimestampId
# 20、加密库
- 用于前端通信内容的加密处理，仅可以参考不能依赖，只是避免了前端的明文传输，无法确保安全，安全处理仍建议https与后端处理
- [crypto-js](https://github.com/brix/crypto-js)
- [gm-crypt](https://www.npmjs.com/package/gm-crypt)
# 21、图表库
- 用于项目可视化数据的图表展示
- [echarts](https://echarts.apache.org/handbook/zh/basics/download)
# 22、md文档操作库
- 用于在项目内编辑查看md文档使用
- [react-markdown](https://www.npmjs.com/package/react-markdown)
- md文档GFM 特性增强[remark-gfm](https://www.npmjs.com/package/remark-gfm)
# 23、富文本插件库
- 用于文章编辑，常用于文章、通知
- [quilljs集成速度快、成熟稳定](https://quilljs.com/)
- [tiptap定制度高、流行](https://tiptap.dev/)
24、终端控制台打印字体颜色控制库
- 如： console.log(chalk.red("lee"))
- [chalk](https://www.npmjs.com/package/chalk)
