cmpt-huitu-cli

慧图前端项目工程化 CLI 工具，用于快速创建基于 Vue 3 + Vite 的项目模板。

✨ 特性

• 🚀 基于 Vue 3 (Composition API) + Vite 7.x
• 📦 自动集成 cmpt-huitu-ui 和 cmpt-huitu-utils
• 🎨 内置 Element Plus + Pinia + Vue Router
• 🔧 开箱即用的工程化配置（ESLint、Prettier、路径别名等）
• 📱 支持多页面应用（MPA）
• 🎯 TypeScript 友好（可选）

📦 安装

全局安装（推荐）

npm install -g cmpt-huitu-cli

使用 npx（无需安装）

npx cmpt-huitu-cli create my-project

🚀 快速开始

创建新项目

# 使用 npx（推荐）
npx cmpt-huitu-cli create my-project

# 或全局安装后
huitu create my-project

# 指定创建目录
huitu create my-project --dir /path/to/dir

启动项目

cd my-project
pnpm install  # 或 npm install
pnpm dev      # 或 npm run dev

📁 生成的项目结构

my-project/
├── public/           # 静态资源
├── src/
│   ├── assets/      # 资源文件
│   ├── components/  # 组件
│   ├── routers/     # 路由配置
│   ├── services/    # API 服务
│   ├── stores/      # Pinia 状态管理
│   ├── styles/      # 样式文件
│   ├── utils/       # 工具函数
│   └── views/       # 页面视图
├── vite.config.js   # Vite 配置
└── package.json

🎯 内置功能

路径别名

已配置以下路径别名（可在 vite.config.js 和 jsconfig.json 中查看）：

• @ → ./src
• @components → ./src/components
• @views → ./src/views
• @stores → ./src/stores
• @utils → ./src/utils
• @services → ./src/services
• @assets → ./src/assets
• @styles → ./src/styles

样式系统

• 自动注入共享样式变量和 mixin（来自 cmpt-huitu-ui）
• 支持 SCSS
• 支持主题切换（浅色/深色）

状态管理

• 集成 Pinia
• 延迟实例化模式（避免 Pinia 未初始化错误）
• 示例 Store 代码

📚 使用 cmpt-huitu-ui 和 cmpt-huitu-utils

创建的项目已自动安装并配置好 cmpt-huitu-ui 和 cmpt-huitu-utils。

使用 UI 组件

<script setup>
  import { HTable, VexTable, HtDialog } from 'cmpt-huitu-ui'
</script>

<template>
  <HTable
    :data="tableData"
    :columns="columns"
  />
  <VexTable
    :data="tableData"
    :columns="columns"
  />
  <HtDialog
    v-model="visible"
    title="对话框"
    >内容</HtDialog
  >
</template>

使用工具函数

import { parseTime, cache, modal } from 'cmpt-huitu-utils'

// 时间处理
const time = parseTime(new Date())

// 缓存
cache.session.set('key', 'value')
const value = cache.session.get('key')

// 消息提示
modal.msgSuccess('操作成功')

🔧 配置说明

环境变量

创建 .env.development 和 .env.production 文件：

VITE_PORT=3001
VITE_PATH=/
VITE_MOCK=false

代理配置

在 vite.config.js 中配置开发代理：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

📖 更多文档

• 项目规则与架构指南
• cmpt-huitu-ui 文档
• cmpt-huitu-utils 文档
• 发布指南

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

ISC