create-wl-app

外观

🚀 React 模板 —— 现代化前端开发的最佳选择 ​

小磊丶同学/vite_react_init

🌟 核心优势 ​

  • ✅ 开箱即用 - 无需复杂配置，一键生成生产级React项目
  • ⚡ 极致性能 - 基于Vite 8 + Rolldown，构建速度飞起来
  • 🎨 现代化技术栈 - 集成React生态最优质的依赖库
  • 🔧 开发友好 - 内置丰富的开发工具，提升开发效率
  • 📱 完美适配 - 自动适配各种屏幕尺寸

🛠️ 技术栈亮点 ​

🔌 核心框架 ​

  • React 19 - 最新稳定版，带来并发渲染和自动批处理
  • Vite 8 - 下一代前端构建工具，基于Rolldown引擎，速度飙升
  • JavaScript (ESModule) - 现代JavaScript语法，支持Tree Shaking

🎯 状态管理 ​

  • zustand - 轻量级状态管理库，API简洁，性能卓越
    • 无需样板代码，轻松管理全局状态
    • 支持中间件，如持久化存储、DevTools等
    • 完美支持TypeScript

🎨 UI组件库 ​

  • antd - 企业级UI组件库，丰富的组件，优雅的设计
  • antd-style - 现代化CSS-in-JS解决方案，样式隔离，开发高效
    • 支持主题定制
    • 内置CSS变量支持
    • 支持服务端渲染

🔄 网络请求 ​

  • axios - 强大的HTTP客户端，支持拦截器、取消请求等
  • ahooks - 阿里出品的高质量React Hooks库
    • useRequest - 强大的异步数据管理Hook
    • 支持自动请求、防抖、节流、重试等
    • 内置加载状态管理

📱 页面适配 ​

  • autofit.js - 自动适配不同屏幕尺寸，无需手动配置
  • autoprefixer - 自动添加CSS前缀，确保浏览器兼容性

🛠️ 开发工具 ​

  • code-inspector-plugin - 浏览器到IDE的一键跳转
    • 按住shift + alt点击元素，直接打开对应组件代码
    • 支持VSCode、WebStorm、Trae等主流IDE
  • ESLint - 代码质量检查，确保代码规范
  • Husky - Git钩子，提交前自动检查代码

🚀 快速开始 ​

bash
# 创建项目
npx create-wl-app create

? 请选择模板 (Use arrow keys)
❯ vite-react
  vite-vue3

? 请输入项目名称 my-react-app

? 请输入项目描述 一个基于React的现代化项目模板

✔ 项目生成中...

项目生成成功

# 进入项目目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run start

# 构建生产版本
npm run build

📋 兼容性说明 ​

  • 浏览器支持 - 基于@vitejs/plugin-legacy配置，支持主流浏览器
  • CSS兼容性 - 自动添加浏览器前缀，确保跨浏览器一致性
  • 响应式设计 - 完美适配移动端、平板和桌面端

💡 最佳实践 ​

  1. 组件设计 - 遵循单一职责原则，组件化开发
  2. 状态管理 - 优先使用React Hooks，复杂状态使用zustand
  3. 网络请求 - 使用ahooks的useRequest管理异步数据
  4. 样式开发 - 使用antd-style进行组件样式隔离
  5. 代码规范 - 遵循ESLint规则，提交前自动检查

📚 文档资源 ​

🎉 立即使用create-wl-app，开启你的现代化React开发之旅！

📱 适配大屏 | ⚡ 极致性能 | 🎨 优雅设计 | 🔧 开发友好