lw-create-vite

🚀 一个快速创建 Vite 项目的脚手架工具，支持多种前端框架和 TypeScript。

✨ 特性

• 🎯 零配置: 开箱即用，快速初始化项目
• 🌈 多框架支持: React、Vue，满足不同开发需求
• 📝 TypeScript 支持: 完整的 TypeScript 模板和配置
• ⚡️ 基于 Vite: 享受极速的开发体验
• 🛠️ 现代工具链: 集成 ESLint、热重载等开发工具
• 📦 轻量级: 最小化依赖，快速安装

📦 安装

全局安装（推荐）

npm install -g lw-create-vite

使用 npx（无需安装）

npx lw-create-vite my-app

🚀 快速开始

创建新项目

# 交互式创建项目
lw-create-vite my-project

# 或者使用 npx
npx lw-create-vite my-project

支持的模板

| 模板 | 描述 | 技术栈 | | ---------- | --------------------- | ---------------------------------- | | react | React JavaScript 项目 | React + Vite + ESLint | | react-ts | React TypeScript 项目 | React + TypeScript + Vite + ESLint | | vue | Vue JavaScript 项目 | Vue 3 + Vite | | vue-ts | Vue TypeScript 项目 | Vue 3 + TypeScript + Vite |

项目启动

创建完成后，进入项目目录：

cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

📋 使用示例

1. 创建 React TypeScript 项目

lw-create-vite my-react-app
# 选择 react-ts 模板

2. 创建 Vue 项目

lw-create-vite my-vue-app
# 选择 vue 模板

3. 使用命令行参数

# 指定模板创建（计划中的功能）
lw-create-vite my-app --template react-ts

🏗️ 项目结构

lw-create-vite/
├── src/
│   └── index.ts           # 核心逻辑（TypeScript）
├── index.js               # 入口文件
├── template-react/        # React JavaScript 模板
├── template-react-ts/     # React TypeScript 模板
├── template-vue/          # Vue JavaScript 模板
├── template-vue-ts/       # Vue TypeScript 模板
├── package.json
├── tsconfig.json
└── README.md

🔧 模板特性

React 模板

• ⚛️ React 18
• ⚡️ Vite 开发服务器
• 🔧 ESLint 代码检查
• 🎨 CSS 模块支持
• 🔥 热重载

Vue 模板

• 🖖 Vue 3 Composition API
• ⚡️ Vite 开发服务器
• 📁 组件化结构
• 🎨 Scoped CSS
• 🔥 热重载

TypeScript 模板额外特性

• 📝 完整的 TypeScript 配置
• 🛡️ 类型检查
• 📖 类型声明文件
• 🔧 严格的 TypeScript 规则

🛠️ 开发

本地开发

# 克隆项目
git clone <repository-url>
cd lw-create-vite

# 安装依赖
npm install

# 创建全局链接（用于本地测试）
npm link

# 现在可以使用本地版本
lw-create-vite test-project

项目构建

# TypeScript 编译
npm run build

# 发布到 npm
npm publish

📋 命令行选项

lw-create-vite [项目名称] [选项]

选项:
  -h, --help        显示帮助信息
  -v, --version     显示版本信息
  --template        指定模板 (react|react-ts|vue|vue-ts)

🎯 最佳实践

1. 项目命名建议

# 使用 kebab-case
lw-create-vite my-awesome-app

# 避免特殊字符
lw-create-vite my_app  # ❌
lw-create-vite MyApp   # ❌

2. 开发环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 yarn >= 1.22.0

3. IDE 推荐配置

VS Code 扩展推荐

• ES7+ React/Redux/React-Native snippets
• Vetur (Vue)
• TypeScript Importer
• ESLint

🔍 故障排除

常见问题

1. 命令找不到

lw-create-vite: command not found

解决方案：

• 确保已全局安装：npm install -g lw-create-vite
• 检查 npm 全局路径：npm config get prefix
• 重新安装：npm uninstall -g lw-create-vite && npm install -g lw-create-vite

2. 权限错误

EACCES: permission denied

解决方案：

• 使用 sudo（macOS/Linux）：sudo npm install -g lw-create-vite
• 配置 npm 全局路径（推荐）
• 使用 npx 替代：npx lw-create-vite my-app

3. 依赖安装失败

解决方案：

• 清除 npm 缓存：npm cache clean --force
• 删除 node_modules 重新安装
• 尝试使用 yarn：yarn install

添加新模板

1. 在根目录创建 template-[name]/ 文件夹
2. 添加完整的项目模板文件
3. 更新 src/index.ts 中的模板列表
4. 更新 README 文档

📊 与其他工具对比

| 特性 | lw-create-vite | create-react-app | create-vue | Vite 官方模板 | | ---------- | -------------- | ---------------- | ---------- | ------------- | | 创建速度 | ⚡️ 极快 | 🐌 较慢 | ⚡️ 快 | ⚡️ 快 | | 模板丰富度 | 🌟 中等 | 🌟 有限 | 🌟 中等 | 🌟🌟 丰富 | | TypeScript | ✅ 完整支持 | ✅ 支持 | ✅ 支持 | ✅ 支持 | | 自定义程度 | 🎯 中等 | 🔒 有限 | 🎯 高 | 🎯 高 | | 维护状态 | 🔄 活跃 | 🔄 维护模式 | 🔄 活跃 | 🔄 活跃 |

📄 许可证

ISC

👨‍💻 作者

785184273

🔗 相关链接

• Vite 官方文档
• React 官方文档
• Vue 官方文档
• TypeScript 官方文档

📝 提示: 这是一个轻量级的项目脚手架工具，专注于提供最佳的 Vite 开发体验。