qtmdfe

工程化脚手架，用于快速初始化前端项目。

功能特性

• 支持多种前端框架模板：Vue 2、Vue 3、uni-app
• 支持多种模块集成，如路由、状态管理、UI库等
• 提供交互式和快速两种使用方式
• 支持创建独立项目和添加子应用两种模式
• 基于 Git 模板仓库进行项目初始化
• 使用 EJS 模板引擎支持动态配置

发布

npm config set //registry.npmjs.org/:_authToken=${NPM_TOKEN}
npm publish

安装

# 推荐使用 npx 直接运行
# 不推荐 npm i qtmdfe -g 全局安装
npx qtmdfe

快速开始

创建新项目

# 交互式模式
npx qtmdfe app-new

# 快速模式
npx qtmdfe app-new my-project -f vue3 -m vue-router pinia -q

# 创建完项目后, 在根目录执行以下命令安装依赖
pnpm install

# 安装完依赖后格式化代码（务必）
pnpm -w run lint:fix

添加子应用

# 在现有项目中添加子应用
npx qtmdfe app-add my-subapp -f vue3 -m vue-router pinia -q

命令行参考

npx qtmdfe app-new - 创建新项目

| 参数 | 说明 | 默认值 | | ------------------- | ------------- | -------------------------- | | [name] | 项目名称（2-214字符） | - | | -d, --description | 项目描述（6-500字符） | this is a description... | | -f, --framework | 核心框架 | vue3 | | -m, --modules | 要集成的模块（空格分隔） | - | | -s, --store-dir | 存储目录 | 当前目录 | | -r, --root | 项目根目录名称 | my-project | | -q, --quick | 快速模式，跳过交互式提示 | false |

qtmd app add - 添加子应用

| 参数 | 说明 | 默认值 | | ------------------- | -------------- | -------------------------- | | [name] | 子应用名称（2-214字符） | - | | -d, --description | 项目描述（6-500字符） | this is a description... | | -f, --framework | 核心框架 | vue3 | | -m, --modules | 要集成的模块（空格分隔） | - | | -q, --quick | 快速模式，跳过交互式提示 | false |

其他命令

| 命令 | 说明 | | ------------------------- | ------------- | | npx qtmdfe app-templates | 显示可用模板列表 | | npx qtmdfe app-cache-delete | 删除缓存文件 | | npx qtmdfe app-upgrade | 升级项目代码标准到最新版本 |

支持的框架模板

| 模板 | 描述 | | -------- | ------------- | | vue2 | Vue 2 框架 | | vue3 | Vue 3 框架 | | uniapp | uni-app 跨平台框架 |

支持的模块

基础模块（所有框架通用）

| 模块 | 描述 | | ------------- | ------------ | | axios | HTTP 客户端库 | | scss | CSS 预处理器 | | tailwindcss | 实用优先的 CSS 框架 | | unocss | 即时原子 CSS 引擎 | | cesium | 3D 地球和地图可视化库 |

Vue 2 专用模块

| 模块 | 描述 | | ------------ | ------------ | | vue-router | Vue 2 路由管理 | | vuex | Vue 2 状态管理 | | element-ui | Vue 2 UI 组件库 |

Vue 3 专用模块

| 模块 | 描述 | | -------------- | ------------ | | vue-router | Vue 3 路由管理 | | pinia | Vue 3 状态管理 | | element-plus | Vue 3 UI 组件库 |

uni-app 专用模块

| 模块 | 描述 | | ----------- | -------------- | | uview-pro | uni-app UI 组件库 |

使用示例

示例 1：交互式创建 Vue 3 项目

npx qtmdfe app-new
# 按照提示输入项目信息

示例 2：快速创建 Vue 3 项目

npx qtmdfe app-new my-vue3-project \
  -f vue3 \
  -d "A modern Vue 3 project with routing and state management" \
  -m vue-router pinia element-plus \
  -s ./projects \
  -q

示例 3：查看可用模板

npx qtmdfe app-templates

示例 4：添加 Vue 3 子应用

# 确保当前目录是用qtmdfe脚手架创建的, 你可以在任意目录执行这个指令, 脚手架会自动找寻根目录 ( .qtmd 文件所在的目录 )
cd existing-project
npx qtmdfe app-add admin-panel -f vue3 -m vue-router pinia -q

示例 5：删除缓存

npx qtmdfe app-cache-delete

项目结构

创建的项目基于 https://codes.datamatrixai.com/sxm/fe-infra.git 模板仓库，包含：

• 符合所选框架的标准目录结构
• 集成所选模块的配置和依赖
• 基础的开发和构建脚本
• .qtmd 项目根目录标记文件

命名规范

项目名称和根目录名称必须遵循：

• 仅包含小写字母、数字、连字符(-)和下划线(_)
• 不能以连字符或下划线开头/结尾
• 长度 2-214 字符

项目描述长度要求：6-500 字符

技术栈

• Commander - 命令行参数解析
• Prompts - 交互式命令行提示
• EJS - 模板引擎
• fs-extra - 文件系统操作
• execa - 命令执行
• chalk - 终端彩色输出

许可证

ISC