wang-q-l 官网前台生成器
概述
根据用户描述的需求（导航结构、页面类型、主题颜色等）或提供的设计稿，快速生成一个完整的 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/ 下的路由文件：
// src/router/modules/main.ts
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 插件，参考官方文档配置