React前端实现-202508

相关参考

1. CSDN | 从0到1使用vite搭建react项目保姆级教程
2. Tailwind CSS 中文站| Install Tailwind CSS with Vite
3. Tailwind CSS 官方站| Installation Using Vite
4. Github | tailwindcss 无法初始化 Discussion
5. Github | Cesium 官方 Vite 模板

一、基本配置

（一）编辑器配置

1、编辑器：VS Code / Trae

2、安装相关插件

• vscode-icons：文件系统图标优化
• Tailwind CSS IntelliSense：Tailwind CSS样式可视化
• ESLint：代码检查
• Prettier：代码格式化

（二）项目初始化

初始化一个使用Vite、React、TypeScript、Tailwind CSS的前端项目底板。

1、创建vite-react-typescript项目

npm create vite@latest gisrs-data-management -- --template react-ts

2、切换到项目目录

cd gisrs-data-management

3、安装 Tailwind CSS

• 需要注意的是：由于tailwindcss v4后出现破坏性变更，不再使用init初始化，且不支持旧版浏览器

npm install -D tailwindcss postcss autoprefixer

4、初始化样式配置文件

npx tailwindcss init -p

5、配置项目CSS关联

• 详细配置参考：https://www.tailwindcss.cn/docs/guides/vite#react

（三）配置插件

1、安装Vite配件

• 用于vite.config.ts内部配置

npm install -D vite-plugin-html vite-plugin-static-copy

2、安装Cesium及其配件

• 逐个安装，-D表示仅开发环境下使用

npm install cesium

npm install -D vite-plugin-cesium

3、安装图标库-当前市面主流图标库

• https://lucide.dev/icons/

npm install lucide-react

（四）构建自定义UI组件

1、初始化shadcn

• 参考：https://v3.shadcn.com/docs/installation/vite
• 由于使用的 Tailwind CSS 版本是 v3.4，所以选用与其版本匹配的shadcn v2.3.0

npx shadcn@2.3.0 init

2、使用shadcn添加指定组件

npx shadcn add button tooltip separator

3、引用组件

• 参考：https://v3.shadcn.com/docs/components/

---

最后更新: 2026-03-21
创建日期: 2026-03-21
作者: gis-xh