create-wl-app

外观

🎉 欢迎使用 create-wl-app ​

🚀 什么是 create-wl-app？ ​

create-wl-app 是一款现代化前端脚手架，基于 Vite 8 + Rolldown 构建，旨在为开发者提供极速、便捷、开箱即用的前端项目创建体验。

✨ 核心优势 ​

  • ⚡ 极速构建：基于 Rust 驱动的 Vite 8 + Rolldown，构建速度提升 15 倍
  • 📦 开箱即用：内置完整项目结构，无需复杂配置
  • 🎨 多框架支持：支持 React 18、Vue 3 两大主流框架
  • 🔧 开发友好：集成 ESLint、Git 钩子、开发工具等
  • 📱 完美适配：自动适配各种屏幕尺寸

📋 环境准备 ​

在开始之前，请确保你的设备已安装以下环境：

✅ 必备环境 ​

  1. Git - 版本控制系统

  2. Node.js - JavaScript 运行时

    • 版本要求：20.0.0 以上
    • 直接下载node地址：https://nodejs.org
    • 或使用 nvm-desktop 管理 Node.js 版本（推荐）
    • 下载地址: nvm-desktop
    • 验证方式：node --version

🎯 推荐工具 ​

  • Trae - 智能 IDE (字节出品)

  • Visual Studio Code - 现代化代码编辑器

🎉 开始创建项目 ​

🚀 步骤 1：初始化项目 ​

打开终端，在你想要创建项目的目录中输入以下命令：

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

🎯 步骤 2：选择模板 ​

根据提示选择你想要使用的框架模板：

? 请选择模板类型：
❯ React 模板
  Vue3 模板

📝 步骤 3：填写项目信息 ​

按照提示输入项目名称和项目描述：

? 请输入项目名称：my-awesome-app
? 请输入项目概述：一个使用 create-wl-app 创建的现代化前端应用

⏳ 步骤 4：等待模板下载 ​

模板下载通常只需要几秒钟即可完成。

📦 步骤 5：进入项目目录 ​

bash
cd my-awesome-app

🎯 步骤 6：初始化 Git 仓库 ​

bash
# 初始化 Git 仓库
git init

# 添加所有文件
git add .

# 提交初始版本
git commit -m "feat: 初始化项目"

📦 步骤 7：安装依赖 ​

bash
# 使用 npm 安装依赖
npm install

🚀 步骤 8：启动开发服务器 ​

bash
# 启动开发服务器（毫秒级启动）
npm run dev

🏗️ 步骤 9：构建生产版本 ​

bash
# 构建生产版本（秒级构建）
npm run build

🎯 项目结构 ​

创建的项目将包含以下核心结构：

React 模板结构 ​

my-awesome-app/
├── src/
│   ├── apis/          # 接口定义
│   ├── components/    # 通用组件
│   ├── common/        # 公共工具
│   ├── store/         # 状态管理（Zustand）
│   ├── App.jsx        # 根组件
│   └── main.jsx       # 入口文件
├── eslint.config.mjs  # ESLint 配置
├── vite.config.js     # Vite 配置
└── package.json       # 项目依赖

Vue3 模板结构 ​

my-awesome-app/
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 通用组件
│   ├── common/        # 公共工具
│   ├── stores/        # 状态管理（Pinia）
│   ├── views/         # 页面组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── eslint.config.mjs  # ESLint 配置
├── vite.config.js     # Vite 配置
└── package.json       # 项目依赖

📚 常用命令 ​

命令描述
npm run dev启动开发服务器
npm run build构建生产版本
npm run preview预览生产构建
npm run lint运行 ESLint 检查 并修复错误

🚀 下一步 ​

恭喜你！你已经成功创建了一个使用 create-wl-app 的现代化前端项目。

🌟 推荐阅读 ​

🤝 社区支持 ​

🎉 现在，开始你的现代化前端开发之旅吧！

🚀 快速开发 | 🎨 优雅设计 | ⚡ 极致性能 | 🔧 开发友好