vitekit-cli

🚀 一行命令创建 Vite + TypeScript + Vue3 + Pinia + Vue-Router + Axios + Tailwind CSS 全家桶项目，开箱即用。

✨ 特性

• ⚡ 基于 Vite 的极速构建
• 🔍 完整的 TypeScript 类型支持
• 🧩 Vue3 + Pinia + Vue-Router 官方组合
• 📡 Axios 已封装，支持环境变量基地址
• 🎨 Tailwind CSS 已配置，原子化样式即刻使用
• 🪝 集成 ESLint & Prettier（保存即格式化）
• 📦 零配置，1 分钟进入开发

📦 安装 & 使用

| 方式 | 命令 | |---|---| | npx（推荐） | npx vitekit-cli my-project | | 全局安装 | npm i -g vitekit-cli   →   vitekit my-project |

随后按提示操作即可：

cd my-project
npm install
npm run dev

🗂️ 生成目录一览

my-project/
├─ .vscode/settings.json   # 推荐插件与格式化
├─ public/
├── src/
│   ├── App.vue                 # 根组件
│   ├── main.ts                 # 应用入口文件
│   ├── api/                    # API请求封装
│   ├── assets/                 # 静态资源
│   ├── components/             # Vue组件
│   ├── router/                 # 路由配置
│   ├── store/                  # Pinia状态管理
│   │   ├── index.ts            # Pinia实例配置
│   │   └── modules/            # 模块化状态管理
│   ├── utils/                  # 工具函数
│   ├── views/                  # 页面组件
│   └── vite-env.d.ts           # Vite环境类型声明
├── public/                     # 静态资源（不会被构建工具处理）
├── index.html                  # HTML入口文件
├── package.json                # 项目依赖配置
├── tsconfig.json               # TypeScript配置
├── tsconfig.app.json           # 应用TypeScript配置
├── tsconfig.node.json          # NodeTypeScript配置
├── vite.config.ts              # Vite配置
└── eslint.config.js            # ESLint配置

🎨 Tailwind CSS 速用示例

<template>
  <h1 class="text-3xl font-bold text-indigo-600">
    Hello vitekit + Tailwind!
  </h1>
</template>

支持 hover:、md:、dark: 等全套响应式与暗黑变体，已配置 autoprefixer 与 cssnano，生产构建自动优化。

⚙️ 脚本

| 命令 | 说明 | |---|---| | npm run dev | 启动开发服务器（Hot + Tailwind JIT） | | npm run build | 构建生产包（Tailwind 自动 purging） | | npm run preview | 本地预览生产包 | | npm run lint | ESLint 检查 | | npm run lint:fix | 自动修复 ESLint 错误 |

🎯 下一步可以玩什么？

• [ ] 集成 UnoCSS 双引擎
• [ ] 添加单元测试（Vitest）
• [ ] 多模板选择（后台 / 移动端 / 微前端）
• [ ] 自动发布 GitHub Actions

欢迎提 Issue 或 PR 一起完善！

📄 License

MIT © snow_h