一个基于 Vue 2 + Element UI 的前端页面模板浏览、预览与代码导出平台。开发者可以在浏览器中实时配置参数、预览效果，并一键复制或下载生成好的 .vue 文件。

---

• 🗂 模板浏览：按分类（列表类 / 表单类 / 数据展示 / 混合类）浏览和搜索所有内置模板
• ⚡ 实时预览：参数修改后 300ms 防抖刷新，通过 iframe srcdoc 隔离渲染，所见即所得
• 🛠 参数编辑：支持自由增删参数行，修改模板标题、数据、公告等任意字段
• 📋 一键导出：复制生成代码到剪贴板，或直接下载为 .vue 文件
• 🧩 可扩展：模板以独立 JS 模块注册，提供脚手架命令快速生成新模板骨架

---

模板 ID	名称	分类
exam-apply	课程考试申请列表	混合类
exam-defer	考试延期申请	混合类
login-form	登录表单	表单类
data-list	通用数据列表	列表类
dashboard	数据看板	数据展示
user-list	用户列表页	列表类

---

• Node.js ≥ 14
• npm ≥ 6

# 克隆项目
git clone <仓库地址>
cd uiTemplate

# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:8080）
npm run serve

npm run build
# 产物输出到 dist/ 目录

---

项目内置了 scripts/new-template.js 脚手架，一行命令即可生成模板骨架并自动注册：

npm run new:template -- --id <模板ID> --name <名称> [选项]

参数	说明	默认值	必填
--id	模板 ID，kebab-case，如 order-list	—	✅
--name	模板中文名称，如 订单列表	—	✅
--category	分类：list / form / table / mixed	mixed
--tags	标签，逗号分隔，如 列表,订单,CRUD	空
--desc	模板描述	与 name 相同
--type	骨架类型：table / form / detail / custom	custom

# 生成一个带搜索/分页的表格型列表模板
npm run new:template -- --id order-list --name 订单列表 --category list --tags 列表,订单,CRUD --desc "带搜索和分页的订单列表" --type table

# 生成一个自定义模板（空骨架）
npm run new:template -- --id my-page --name 我的页面 --category mixed

命令执行成功后会：

1. 创建 src/templates/<id>/index.js（含默认参数和 generate() 骨架）
2. 自动将新模板注册到 src/templates/index.js
3. 打印访问地址，刷新浏览器即可看到新模板

---

每个模板是一个标准 JS 配置对象，放在 src/templates/<id>/index.js：

export default {
  id: 'my-template',           // 唯一 ID，与目录名一致
  name: '我的模板',
  category: 'mixed',           // list | form | table | mixed
  tags: ['示例', 'Element UI'],
  description: '模板简要描述',
  thumbnail: null,             // 可传图片 URL 作为缩略图

  // 默认参数（用户进入编辑页时的初始值）
  defaultParams: {
    title: '我的页面标题',
    notice: '这里是公告内容',
  },

  // 代码生成函数：接收参数对象，返回完整 Vue SFC 字符串
  generate(params) {
    const { title, notice } = params
    return `<template>
  <div>
    <h1>${title}</h1>
    <p>${notice}</p>
  </div>
</template>

<script>
export default {
  name: 'MyTemplate',
  data() {
    return {
      title: '${title}',
    }
  }
}
<\/script>

<style scoped>
/* 你的样式 */
</style>`
  }
}

编写完成后，在 src/templates/index.js 中引入并加入 allTemplates 数组即可。

---

src/
├── main.js                      # Vue 入口，注册 Element UI
├── App.vue                      # 根组件，顶部导航栏
├── router/index.js              # 路由：/ 首页，/editor/:id 编辑页
├── store/
│   ├── index.js                 # Vuex 入口
│   └── modules/editor.js        # 编辑器状态（当前模板、动态参数列表）
├── views/
│   ├── Home.vue                 # 模板浏览首页
│   └── Editor.vue               # 编辑预览页
├── components/
│   ├── TemplateCard.vue         # 模板卡片
│   ├── ParamPanel.vue           # 动态参数面板（支持增删）
│   ├── PreviewFrame.vue         # iframe 实时预览
│   └── CodePanel.vue            # 代码展示 + 复制 + 下载
├── templates/
│   ├── index.js                 # 模板注册中心
│   ├── examApply/index.js       # 课程考试申请列表模板
│   ├── examDefer/index.js       # 考试延期申请模板
│   └── ...                      # 其他内置模板
└── utils/
    ├── index.js                 # axios request 封装（占位）
    ├── buildPreviewHtml.js      # 生成 iframe srcdoc 完整 HTML
    └── export.js                # 复制/下载工具函数

scripts/
└── new-template.js              # 新增模板脚手架命令

---

层次	选型
前端框架	Vue 2.6 + Vue Router 3 + Vuex 3
UI 组件库	Element UI 2.15
构建工具	Vue CLI 5 / webpack 4
代码高亮	highlight.js 11
预览隔离	iframe srcdoc，内嵌 Vue 2 + Element UI CDN

---

Q: 预览区域空白怎么办？
A: 检查 generate() 函数的返回值是否包含合法的 <template> 标签，以及 CDN 网络是否可达（预览依赖 jsDelivr CDN 的 Vue 2 和 Element UI）。

Q: 新增参数后生成的代码没有用到这个参数？
A: 平台只负责把参数传给 generate(params) 函数，函数内部需要自行读取并拼入 SFC 字符串。动态添加的参数主要供自定义模板使用。

Q: 如何替换 import request from './utils' 为真实接口？
A: src/utils/index.js 已预留 axios 封装占位，替换为实际的请求方法即可，生成的 .vue 文件中的该导入路径不会改变。

---

MIT