告别手写CRUD！命令行方式通过swagger实现一键生成页面

还在为重复的增删改查页面而烦恼？还在手动联调接口和组件？今天给大家分享一个革命性的Vue组件库，通过命令行方式实现快速页面生成，让你的开发效率提升10倍！

💡 项目背景

作为一名前端开发者，你是否经常遇到这样的场景：

接到新需求，又要写一套完整的CRUD页面
重复编写表格、表单、搜索框等基础组件
手动联调接口，调试各种数据格式问题
⏰ 一个简单的管理页面要花半天时间

如果你也有这些困扰，那么今天分享的这个项目绝对能让你眼前一亮！

🌟 项目介绍

ol-base-components 是一个基于 Element-UI 的企业级开发框架，最大的特色是交互式命令行方式自动生成完整页面，无需手动联调，几秒完成页面。

官网

快速开始

安装

方式一：npm 安装（推荐）

bash 复制代码

# 安装组件库
npm install ol-base-components

# 安装依赖
npm install swagger-client@3.0.1

基本使用

安装

javascript 复制代码

// main.js
import Vue from "vue";
import App from "./App.vue";
import OlBaseComponents from "ol-base-components"; // 导入组件库

// 使用组件库
Vue.use(OlBaseComponents);

// 安装，可以在登录后调用
import { swaggerInstall } from "ol-base-components";
swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(() => {
  // 成功获取swagger数据后加载页面，这里可以写登录接口成功后执行的逻辑
});

// 卸载
import { swaggerUnload } from "ol-base-components";
swaggerUnload();

生成页面

1. 生成API接口

bash 复制代码

# 基本用法
npx init http://192.168.xxx.xxx:20019

# 自定义输出路径
npx api http://192.168.xxx.xxx:20019 src/api/swagger.js

2. 生成页面组件

bash 复制代码

# 基本用法
npx add userManagement -p src/view

# 完整参数
npx add userManagement -p src/view \
  -u /api/user/paged-result \
  -e /api/user/export \
  -m User

核心亮点：命令行快速生成

1. 一键生成API接口

bash 复制代码

# 从Swagger自动生成API接口
npx init http://192.168.xxx.xxx:20019

这个命令会：

自动获取Swagger文档
自动生成完整的API接口文件
包含详细的JSDoc注释
自动处理接口参数和返回值

2. 交互式页面生成

bash 复制代码

# 交互式生成完整CRUD页面
npx add userManagement -p src/view

运行后会弹出交互式配置：

📋 选择需要的功能（新增、编辑、删除、详情）
配置接口地址
⚙️ 设置字段映射
自动生成完整的Vue组件

效果如下

🛠️ 技术实现

核心架构

项目采用模块化设计，主要包含：

组件库：基于Element-UI二次封装
命令行工具：Node.js脚本自动生成代码
Swagger集成：自动解析API文档
模板引擎：动态生成Vue组件代码

搭配vscode插件 vue-page-generator

为ol-base-components写的一个 VSCode 插件。取代之前命令行方式，通过可视化的交互方式更加简单方便的自动生成 CRUD 页面模板。

安装

在 VSCode 扩展商店中搜索"vue-page-generator"并安装

使用方法

在 VSCode 文件资源管理器中右键选择一个文件夹
选择 "生成 CRUD 页面" 菜单项
在弹出的配置面板中填写相关信息
点击 "🚀 生成页面" 按钮

步骤效果图

🎯 总结

ol-base-components 通过创新的命令行生成方式和交互式方式，彻底改变了传统的前端开发模式：

✅ 告别重复劳动：不再手写CRUD页面
✅ 提升开发效率：从小时级到分钟级
✅ 降低维护成本：标准化代码结构
✅ 减少联调时间：自动处理接口对接

如果你也想体验这种革命性的开发方式，不妨试试这个项目。相信它会让你重新认识前端开发的效率边界！

亲测有效！有疑问可留言交流