Vite Kit CLI 工具

一个基于 Vite 的命令行工具，用于快速创建项目模板和上传构建资源。

✨ 特性

• 🚀 快速创建 Vite + Vue3 项目模板
• 📦 支持多种项目模板（H5 和 PC 端）
• ⬆️ 一键上传构建资源到服务器
• 🎯 简单易用的命令行界面
• 🔧 灵活的配置管理

📦 安装

全局安装

npm install -g @cro_tffe/vite-kit

🚀 使用方法

安装完成后，你可以使用 viteKit 或 vite-kit 或 vk 命令：

1. 初始化项目

viteKit init
# 或者
vite-kit init
# 或者
vk init

运行后会出现交互式选择界面，支持以下模板：

• vite-vue3-h5 - Vue3 + Vite H5 移动端模板
• vite-vue3-pc - Vue3 + Vite PC 端模板

选择模板后，工具会自动从 GitLab 仓库克隆相应的模板代码。

2. 上传构建资源

viteKit sync
# 或者
vite-kit sync
# 或者
vk sync

将构建后的资源打包并上传到指定服务器。

⚙️ 配置

上传配置

在项目根目录创建 config/prod-config.js 文件：

export default {
  // 项目名称（必需）
  projectName: "your-project-name",

  // 构建配置
  build: {
    outDir: "dist", // 构建输出目录
    outPath: "assets", // 资源文件夹名称
  },

  // 上传配置
  upload: {
    host: "your-server.com", // 服务器地址
    port: 3000, // 服务器端口（默认3000）
    path: "/file_upload", // 上传接口路径（默认/file_upload）
    businessType: "web", // 业务类型
  },
};

配置说明

| 配置项 | 类型 | 必需 | 默认值 | 说明 | | --------------------- | ------ | ---- | -------------- | ---------------------------- | | projectName | string | ✅ | - | 项目名称，用于标识上传的文件 | | build.outDir | string | ❌ | "dist" | Vite 构建输出目录 | | build.outPath | string | ❌ | "assets" | 需要上传的资源文件夹 | | upload.host | string | ✅ | - | 目标服务器地址 | | upload.port | number | ❌ | 3000 | 服务器端口 | | upload.path | string | ❌ | "/file_upload" | 上传接口路径 | | upload.businessType | string | ✅ | - | 业务类型标识 |

📋 命令列表

| 命令 | 描述 | | ------------------- | ------------ | | viteKit --version | 查看版本信息 | | viteKit --help | 查看帮助信息 | | viteKit init | 初始化新项目 | | viteKit sync | 上传构建资源 |

🔧 开发

项目结构

vite-kit/
├── bin/
│   └── cli.js          # CLI 入口文件
├── src/
│   ├── commands/
│   │   ├── init.js     # 初始化命令
│   │   └── upload.js   # 上传命令
│   └── lib/
│       └── config.js   # 配置管理
├── package.json
└── README.md

依赖说明

• commander - 命令行界面框架
• inquirer - 交互式命令行提示
• ora - 终端加载动画
• archiver - 文件压缩
• fs-extra - 增强的文件系统操作
• npmlog - 日志输出

📝 使用示例

完整工作流程

1. 创建新项目

# 初始化项目
viteKit init

# 选择模板（比如 vite-vue3-h5）
# 进入项目目录
cd vite-vue3-h5

# 安装依赖并启动开发服务器
npm install && npm run dev

2. 构建和上传

# 构建项目
npm run build

# 配置上传参数（创建 config/prod-config.js）
# 上传资源
viteKit sync

❗ 注意事项

1. 确保 Node.js 版本 >= 16.0.0
2. 上传功能需要先配置 config/prod-config.js 文件
3. 上传前确保项目已经构建完成
4. 模板仓库需要有相应的访问权限

🐛 常见问题

Q: 初始化项目时提示权限错误？

A: 请确保有访问 GitLab 仓库的权限，并且 SSH 密钥配置正确。

Q: 上传失败？

A: 检查以下几点：

• 是否正确配置了 config/prod-config.js
• 构建目录是否存在
• 服务器是否可访问
• 网络连接是否正常

Q: 找不到构建目录？

A: 确保运行 npm run build 构建项目，并检查配置文件中的 build.outDir 和 build.outPath 设置。

📄 许可证

ISC License

本项目属于团队内部定制化脚手架。