| name | website-generator |
| description | 官网前台框架生成器。采用 Vue3 + Element Plus + Vite + TypeScript + Mock.js。用于快速创建完整的企业官网、产品官网等用户前台系统。使用场景:(1) 需要创建新的官网项目,(2) 用户描述了导航结构、页面类型(首页/产品/关于我们/新闻/联系我们等)、主题颜色等需求,(3) 用户提供官网设计稿,通过分析图片中的导航结构、配色方案、页面布局来生成官网,(4) 需要一个带 Mock 数据的前端项目(无需后端),(5) 快速搭建官网原型。 |
官网前台生成器
概述
根据用户描述的需求(导航结构、页面类型、主题颜色等)或提供的设计稿,快速生成一个完整的 Vue3 + Element Plus 官网前台项目,包含完整的项目结构、路由配置、Mock 数据,开箱即用。
支持两种输入方式:
- 文字描述:用户直接描述需求
- 设计稿:分析图片中的布局结构、配色方案、导航结构
工作流程
1. 收集需求信息
支持两种方式提供需求:
方式一:文字描述
从用户描述中提取以下信息:
必需信息:
- 网站类型:企业官网 / 产品官网 / 个人网站 / 其他
- 功能列表:用户需要哪些功能页面(如:首页、产品展示、服务介绍、关于我们、新闻资讯、联系我们、用户中心等)
- 权限要求:哪些页面需要登录才能访问,哪些页面公开访问
可选信息:
- 主题色:默认
#409eff
- 导航栏背景色:默认
#ffffff
- 导航栏文字色:默认
#333333
- 页脚背景色:默认
#2c3e50
- 布局风格:简约 / 商务 / 科技 / 创意
- 其他自定义需求
功能分类示例:
-
公开访问页面(无需登录):
- 首页
- 产品/服务介绍
- 关于我们
- 新闻资讯
- 联系我们
- 帮助中心
-
需要登录的页面:
- 用户中心
- 个人资料
- 订单管理
- 收藏夹
- 消息通知
- 账户设置
询问用户的问题:
- "请描述您需要哪些功能页面?"
- "哪些页面需要用户登录后才能访问?"
- "是否需要用户注册/登录功能?"
- "是否需要搜索功能?"
- "是否需要多语言支持?"
方式二:设计稿分析
当用户提供设计稿时,需要分析以下内容:
-
布局结构分析:
- 识别整体布局方式(顶部导航 + 内容区 + 底部)
- 确定各个区域的位置:
- 顶部导航栏(Logo、菜单、搜索、语言切换等)
- Banner 区域(首页轮播图、标题等)
- 内容区域布局
- 底部信息栏(公司信息、友情链接、版权等)
-
颜色提取:
- 导航栏背景色
- 导航栏文字颜色
- 导航栏激活状态颜色
- 主题色(按钮、链接等)
- 页脚背景色
- 页脚文字颜色
- 内容区域背景色
-
导航结构识别:
- 识别导航菜单项名称
- 识别菜单层级(一级菜单 / 下拉菜单)
- 识别特殊功能(搜索、语言切换、登录等)
-
其他视觉元素:
- Logo 样式和位置
- 圆角大小
- 间距规范
- 字体大小
- 动画效果
分析步骤:
- 仔细观察图片,识别布局结构
- 使用取色工具或视觉估计提取主要颜色
- 列出所有导航菜单项
- 总结布局特点和配色方案
- 向用户确认分析结果是否准确
注意事项:
- 页面内容区域的具体内容不需要实现,只需要创建基础页面结构
- 重点关注布局结构、配色方案、导航结构
- 如果图片不清晰或信息不完整,询问用户补充
如信息不完整,使用默认值或询问用户。
2. 复制模板项目
重要:项目必须在当前工作目录直接创建,不要创建子目录!
将 assets/template/ 目录下的完整项目复制到当前工作目录:
cp -r assets/template/* ./
注意事项:
- 直接在当前目录创建项目文件,不要使用
/path/to/new-project/ 这样的子目录
- 如果当前目录已有文件,先确认是否可以覆盖
- 项目创建后,所有文件应该与技能所在的
.claude 目录同级
模板包含:
- 完整的项目配置(package.json、vite.config.ts、tsconfig.json)
- 基础布局组件(导航栏、页脚、主布局)
- 路由配置(模块化路由)
- Mock 数据配置(src/mock.ts)
- 样式文件(包含 Element Plus 自定义样式)
- 组件目录结构(common、layout、business、page-templates)
3. 自定义配置
根据收集的需求信息,修改以下文件:
3.1 主题色配置
修改 src/styles/variables.css:
:root {
--primary-color: #409eff;
--nav-bg-color: #ffffff;
--nav-text-color: #333333;
--nav-active-color: #409eff;
--footer-bg-color: #2c3e50;
--footer-text-color: #ffffff;
}
3.2 路由配置
根据导航菜单,修改 src/router/modules/ 下的路由文件:
import { RouteRecordRaw } from 'vue-router'
const mainRoutes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('@/views/home/index.vue'),
meta: { title: '首页' }
},
{
path: '/products',
name: 'Products',
component: () => import('@/views/products/index.vue'),
meta: { title: '产品中心' }
},
{
path: '/about',
name: 'About',
component: () => import('@/views/about/index.vue'),
meta: { title: '关于我们' }
}
]
export default mainRoutes
3.3 导航菜单配置
修改 src/config/menu.ts:
export const menuConfig = [
{ name: '首页', path: '/' },
{ name: '产品中心', path: '/products' },
{ name: '解决方案', path: '/solutions' },
{ name: '关于我们', path: '/about' },
{ name: '新闻动态', path: '/news' },
{ name: '联系我们', path: '/contact' }
]
3.4 网站信息配置
修改 src/config/site.ts:
export const siteConfig = {
name: '公司名称',
logo: '/logo.png',
description: '公司简介',
keywords: 'SEO关键词',
contact: {
phone: '400-xxx-xxxx',
email: 'contact@example.com',
address: '公司地址'
},
social: {
wechat: '',
weibo: '',
linkedin: ''
}
}
4. 创建页面文件
根据路由配置,在 src/views/ 下创建对应的页面文件:
mkdir -p src/views/{home,products,about,news,contact}
touch src/views/home/index.vue
touch src/views/products/index.vue
touch src/views/about/index.vue
touch src/views/news/index.vue
touch src/views/contact/index.vue
每个页面使用统一的模板结构:
<template>
<div class="page-container">
<h1>{{ title }}</h1>
<p>页面内容待完善</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const title = ref('页面标题')
</script>
<style scoped>
.page-container {
padding: 40px 20px;
min-height: 500px;
}
</style>
5. 安装依赖并启动
项目创建完成后,按以下顺序执行命令:
步骤 1: 安装依赖
cd /path/to/new-project
npm install
步骤 2: 验证构建(重要!)
npm run build
这一步非常重要,可以提前发现:
- TypeScript 类型错误
- 导入路径错误
- 语法错误
- 配置问题
如果构建失败:
- 根据错误信息修复问题
- 再次运行
npm run build 验证
- 重复此过程直到构建成功
只有构建成功后,才进行下一步。
步骤 3: 启动开发服务器
npm run dev
技术栈
- Vue 3.4+:使用 Composition API 和
<script setup>
- Element Plus:UI 组件库
- Vite 5.0+:构建工具
- TypeScript:类型安全
- Vue Router 4.x:路由管理
- Pinia:状态管理
- Axios:HTTP 请求
- Mock.js:模拟数据
项目结构
project/
├── public/ # 静态资源
│ └── logo.png
├── src/
│ ├── assets/ # 资源文件
│ │ ├── images/
│ │ └── styles/
│ ├── components/ # 组件
│ │ ├── common/ # 通用组件
│ │ ├── layout/ # 布局组件
│ │ ├── business/ # 业务组件
│ │ └── page-templates/ # 页面模板
│ ├── config/ # 配置文件
│ │ ├── menu.ts # 菜单配置
│ │ └── site.ts # 网站配置
│ ├── layout/ # 布局
│ │ ├── Header.vue # 导航栏
│ │ ├── Footer.vue # 页脚
│ │ └── MainLayout.vue # 主布局
│ ├── router/ # 路由
│ │ ├── index.ts
│ │ └── modules/ # 路由模块
│ ├── stores/ # 状态管理
│ ├── styles/ # 样式
│ │ ├── variables.css
│ │ └── main.css
│ ├── utils/ # 工具函数
│ ├── views/ # 页面
│ │ ├── home/ # 首页
│ │ ├── products/ # 产品页
│ │ ├── about/ # 关于我们
│ │ ├── news/ # 新闻动态
│ │ └── contact/ # 联系我们
│ ├── App.vue
│ └── main.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
默认页面
生成的项目默认包含以下页面:
- 首页(Home):Banner + 产品展示 + 公司介绍
- 产品中心(Products):产品列表 + 筛选
- 关于我们(About):公司介绍 + 团队介绍
- 新闻动态(News):新闻列表 + 详情
- 联系我们(Contact):联系方式 + 留言表单
特性
- ✅ 响应式设计,支持移动端
- ✅ SEO 友好
- ✅ 路由模块化管理
- ✅ 组件模块化组织
- ✅ TypeScript 类型安全
- ✅ Mock 数据支持
- ✅ Element Plus 主题定制
- ✅ Element Plus 滚动条(替代原生滚动条,统一视觉风格)
- ✅ 代码规范(ESLint + Prettier)
注意事项
- 页面内容:生成的页面只包含基础结构,具体内容需要根据实际需求填充
- 图片资源:需要用户提供 Logo 和其他图片资源
- Mock 数据:默认提供示例数据,需要根据实际接口调整
- SEO 优化:需要配置 meta 标签和 sitemap
- 性能优化:大型项目需要考虑懒加载和代码分割
参考文档
生成项目后,可以参考以下文档:
references/layout-configuration.md - 布局配置指南
references/theme-customization.md - 主题定制指南
references/router-configuration.md - 路由配置指南
references/component-organization.md - 组件组织规范
references/seo-optimization.md - SEO 优化指南
示例
示例 1:企业官网
需求:
- 网站类型:企业官网
- 导航菜单:首页、产品中心、解决方案、关于我们、新闻动态、联系我们
- 主题色:#1890ff
- 风格:商务简约
示例 2:产品官网
需求:
- 网站类型:产品官网
- 导航菜单:首页、产品特性、定价、文档、博客、登录
- 主题色:#52c41a
- 风格:科技感
常见问题
Q: 如何添加新页面?
A:
- 在
src/views/ 下创建新页面目录和文件
- 在
src/router/modules/ 中添加路由配置
- 在
src/config/menu.ts 中添加菜单项
Q: 如何修改主题色?
A: 修改 src/styles/variables.css 中的 CSS 变量
Q: 如何自定义导航栏?
A: 修改 src/layout/Header.vue 组件
Q: 如何添加多语言支持?
A: 需要集成 vue-i18n 插件,参考官方文档配置