vue-layout-mcp

一个用于生成 Vue 常用布局组件的 MCP (Model Context Protocol) 服务器。

功能特性

提供 10 种前端常用布局组件生成工具，所有布局均为纯净空白架子，开箱即用：

• 两栏布局 - 左右两栏响应式布局
• 三栏布局 - 左中右三栏响应式布局
• 九宫格布局 - 灵活的九宫格布局
• 顶部+内容区布局 - 带顶部导航栏的布局
• 侧边栏布局 - 可折叠的侧边栏+内容区布局
• 圣杯布局 - 经典的 Header + Sidebar + Content + Footer 布局
• 卡片网格布局 - 响应式卡片网格布局
• Tab 切换布局 - 支持四个方向的标签页切换布局
• 固定侧边栏布局 - 固定宽度侧边栏+自适应内容区布局

安装

使用方法

作为 MCP 服务器运行

vue-layout-mcp

在 ai IDE中配置

在配置文件中添加：

{
  "mcpServers": {
    "vue-layout": {
      "command": "npx",
      "args": ["vue-layout-mcp"]
    }
  }
}

可用工具

generate-layout-two-columns

生成两栏布局组件，适用于左右分栏的页面结构。

参数：

• leftWidth (number): 左侧栏宽度百分比，默认 50
• rightWidth (number): 右侧栏宽度百分比，默认 50

generate-layout-three-columns

生成三栏布局组件，适用于左中右分栏的页面结构。

参数：

• leftWidth (number): 左侧栏宽度百分比，默认 30
• centerWidth (number): 中间栏宽度百分比，默认 40
• rightWidth (number): 右侧栏宽度百分比，默认 30

generate-layout-grid-nine

生成九宫格布局组件，适用于仪表板和数据展示页面。

参数： 无

generate-layout-top-content

生成顶部导航+内容区布局组件，适用于带导航栏的单页应用。

参数：

• topHeight (number): 顶部区域高度（像素），默认 80

generate-layout-sidebar

生成侧边栏布局组件，支持折叠功能，适用于后台管理系统。

参数：

• sidebarWidth (number): 侧边栏宽度（像素），默认 240
• collapsible (boolean): 是否可折叠，默认 true

generate-layout-holy-grail

生成圣杯布局组件（Header + Sidebar + Content + Footer），适用于完整的管理后台。

参数：

• headerHeight (number): 顶部高度（像素），默认 64
• footerHeight (number): 底部高度（像素），默认 50
• sidebarWidth (number): 侧边栏宽度（像素），默认 200

generate-layout-card-grid

生成响应式卡片网格布局组件，支持自适应列数。

参数：

• columns (number): 列数，默认 4
• gap (number): 卡片间距（像素），默认 20

generate-layout-tabs

生成 Tab 标签页切换布局组件，支持四个方向的标签位置。

参数：

• tabPosition (string): Tab 位置，可选值：'top', 'bottom', 'left', 'right'，默认 'top'

generate-layout-fixed-sidebar

生成固定侧边栏宽度的双栏布局，主内容区自适应。

参数：

• sidebarWidth (number): 侧边栏固定宽度（像素），默认 300
• position (string): 侧边栏位置，可选值：'left', 'right'，默认 'left'

开发

# 安装依赖
npm install

# 运行
npm start

许可证

MIT

作者

Your Name

贡献

欢迎提交 Issue 和 Pull Request！