ife-cli

IFE 团队 前端开发脚手架工具，提供页面创建、样式生成、接口文件生成等功能。

✨ 核心特性

• 🎯 智能页面创建：快速创建页面和组件模板，支持交互式配置
• 🎨 自动样式生成：根据 HTML 结构智能生成 SCSS/CSS 样式代码，支持嵌套和缩写
• 🔄 样式转换工具：批量将 class="xx" 替换为 :class="$style['xx']"，支持 CSS Modules
• 📡 接口文件生成：从 Swagger 文档自动生成 API 请求文件，支持多环境配置
• ⚙️ 统一配置管理：全局配置文件管理，支持环境切换和个性化设置
• 🛠️ 多语言支持：支持 CSS、SCSS、Less 等多种样式语言
• 🎛️ 灵活配置：支持 scoped、module 等多种样式作用域

📦 安装

npm install -g ife-cli

🚀 快速开始

# 1. 创建新页面
ife create --type page --name user-profile

# 2. 生成样式代码
ife style --path src/pages/user-profile.vue --lang scss --scoped

# 3. 配置 Swagger 接口
ife config

# 4. 生成 API 文件
ife swagger m3z-digital-tech/车辆公共接口

📖 详细使用说明

1. 页面创建 (create)

创建新的页面或组件：

# 交互式创建（默认命令）
ife create

# 指定类型和名称
ife create --type page --name my-page
ife create --type component --name my-component

参数说明：

• -t, --type <type>: 创建类型，可选值：page、component
• -n, --name <name>: 组件或页面名称

2. 样式生成 (style)

根据 Vue 文件的 HTML 结构自动生成样式代码：

# 交互式选择文件
ife style

# 指定文件路径
ife style --path src/components/MyComponent.vue

# 指定样式语言和选项
ife style --path src/components/MyComponent.vue --lang scss --scoped --override

# 生成 CSS Modules 样式
ife style --path src/components/MyComponent.vue --module

参数说明：

• -p, --path <path>: Vue 文件路径
• -l, --lang <lang>: 样式语言，可选值：css、scss、less（默认：scss）
• -a, --abbr: 启用 SCSS/Less 嵌套缩写（&符号），默认启用
• --no-abbr: 禁用 SCSS/Less 嵌套缩写
• -s, --scoped: 给 style 标签添加 scoped 属性
• -m, --module: 给 style 标签添加 module 属性
• -o, --override: 覆盖原 Vue 文件中的 style 标签

功能特性：

• 自动提取 HTML 中的 class 名称
• 生成嵌套的 SCSS 结构
• 支持 CSS Modules 语法转换
• 智能过滤全局样式类名
• 支持 SCSS 嵌套缩写（如：&-item）
• 支持多种样式语言：CSS、SCSS、Less
• 支持 scoped 和 module 两种样式作用域
• 自动格式化生成的样式代码
• 支持覆盖或追加样式标签

3. 样式转换 (class)

批量将 Vue 文件中的 class="xx" 替换为 :class="$style['xx']"，并可选择同时生成样式代码：

# 交互式选择文件
ife class

# 指定文件路径
ife class --path src/components/MyComponent.vue

# 转换 class 的同时生成样式代码
ife class --path src/components/MyComponent.vue --style

参数说明：

• -p, --path <path>: Vue 文件路径
• -s, --style: 在转换 class 的同时自动生成样式代码

功能特性：

• 自动将 class="xx" 替换为 :class="$style['xx']"
• 支持 --style 参数，可在转换的同时生成对应的样式代码
• 智能过滤全局样式类名，避免转换全局类
• 支持 CSS Modules 语法转换

4. 接口生成 (swagger)

从 Swagger 文档自动生成 API 请求文件：

# 交互式选择环境和模块
ife swagger m3z-digital-tech

# 指定环境和模块
ife swagger m3z-digital-tech --env test
ife swagger m3z-digital-tech/车辆公共接口 --env prod

参数说明：

• <service>: 服务名称，例如：m3z-digital-tech
• [module]: 模块名称，例如：车辆公共接口
• -e, --env <env>: 请求环境，可选值：test、prod、dev 等

功能特性：

• 支持服务/模块的层级结构
• 自动生成 TypeScript 接口定义
• 支持多种请求环境配置
• 生成完整的 API 调用方法

5. 配置管理 (config)

管理 CLI 全局配置：

ife config

执行此命令会自动打开 main.json 配置文件进行编辑。

配置说明

全局配置文件

配置文件位置：~/.config/main.json

配置项说明：

基础配置

• host: 不同环境的 swagger 接口请求地址配置
  • develop: 开发环境地址
  • test: 测试环境地址
  • master: 生产环境地址
• sourceDirectory: 源码目录（默认：src）
• repositoryCheckItems: 仓库检查项（默认：["package.json", "src"]）
• nameRegex: 命名规范正则表达式（默认：^[a-z]+(\\-[a-z0-9]+){0,}$）
• globalStylePath: 全局样式文件路径数组（用于过滤全局样式类名）

配置 Swagger 命令

• swagger.host: Swagger 文档地址
• swagger.directory: API 文件生成目录（默认：src/api）
• swagger.ajax: Ajax 工具引入语句（默认：@/ajax/http）

配置 style 命令

• style.defaultLang: 默认样式语言（默认：scss）
• style.enableAbbreviation: 是否启用嵌套缩写（默认：true）
• style.scoped: 是否默认添加 scoped 属性（默认：false）
• style.override: 是否默认覆盖样式标签（默认：false）

配置 class 命令

• class: 样式转换相关配置（可扩展）

配置示例

{
  "host": {
    "develop": "https://api-dev.example.com",
    "test": "https://api-test.example.com",
    "master": "https://api.example.com"
  },
  "repositoryCheckItems": ["package.json", "src"],
  "nameRegex": "^[a-z]+(\\-[a-z0-9]+){0,}$",
  "sourceDirectory": "src",
  "globalStylePath": ["src/styles/base.scss", "src/styles/basic.scss"],
  "swagger": {
    "host": "https://api.example.com/swagger",
    "directory": "src/api",
    "ajax": "@/ajax/http"
  },
  "class": {},
  "style": {
    "defaultLang": "scss",
    "enableAbbreviation": true,
    "scoped": false,
    "override": false
  }
}

📚 帮助信息

查看具体命令的详细帮助：

ife --help
ife create --help
ife style --help
ife swagger --help
ife class --help
ife config --help

License

MIT