还在为重复的增删改查页面而烦恼？还在手动联调接口和组件？今天给大家分享一个革命性的Vue组件库，通过命令行方式实现快速页面生成，让你的开发效率提升10倍！
💡 项目背景
作为一名前端开发者，你是否经常遇到这样的场景：
- 接到新需求，又要写一套完整的CRUD页面
- 重复编写表格、表单、搜索框等基础组件
- 手动联调接口，调试各种数据格式问题
- ⏰ 一个简单的管理页面要花半天时间
如果你也有这些困扰，那么今天分享的这个项目绝对能让你眼前一亮！
🌟 原理
- 从swagger获取所有接口数据
- 通过脚本生成所有接口js文件并写入项目
- 通过npx交互式命令行或vscode插件可视化方式自动生成联调好的vue页面并写入项目
🌟 项目介绍
ol-base-components 是一个基于 Element-UI 的企业级开发框架，最大的特色是交互式命令行方式自动生成完整页面，无需手动联调，几秒完成页面。
快速开始
安装
方式一：npm 安装（推荐）
# 安装组件库
npm install ol-base-components
# 安装依赖
npm install swagger-client@3.0.1
基本使用
安装
// 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接口
# 从Swagger自动生成API接口
npx init http://192.168.xxx.xxx:20019
这个命令会：
- 自动获取Swagger文档
- 自动生成完整的API接口文件
- 包含详细的JSDoc注释
- 自动处理接口参数和返回值
2. 交互式页面生成
# 交互式生成完整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页面
- ✅ 提升开发效率：从小时级到分钟级
- ✅ 降低维护成本：标准化代码结构
- ✅ 减少联调时间：自动处理接口对接
