Vue 3 + AI Studio

这是一个结合 Vue 3、Vite、Tailwind、Element Plus 与 AI 辅助开发思路的现代前端展示项目，适合用于作品集、个人主页、产品演示页和技术分享场景。

这个项目想表达什么

这个项目不是单纯的模板，而是一个“前端 + AI + 设计系统”的展示示例。它重点体现：

• Vue 3 的现代开发方式
• 前端设计与交互体验的表达能力
• AI 协作开发中的技能规则与工作流组织
• 适合 GitHub 展示、简历展示和作品集展示的页面效果

Vue 3 相关知识点

这个项目使用了 Vue 3 的几项核心能力：

• Composition API：让组件逻辑更清晰、可复用、适合复杂页面拆分
• Single File Component：把模板、逻辑和样式集中在一个文件中，提高可维护性
• Vue Router：支持多页面路由和页面切换体验
• 响应式状态：用来驱动主题切换、模式切换、页面状态变化
• 组件化结构：把页面拆分成更清晰的 UI 单元，适合后续扩展

你可以从这个项目看到的 Vue 3 思路

• 用组合式写法组织交互逻辑
• 用 props 和组件通信构建可复用页面结构
• 用路由组织多场景体验，如首页、登录页、聊天页、仪表盘
• 用现代样式工具提升 UI 的展现质量

Vue 3 + AI 的使用思路

这个项目也体现了一种更前沿的开发方式：用 AI 来协助前端开发，而不只是“自动生成代码”。

适合的使用方式

• 用 AI 帮助生成页面结构和内容组织
• 用 AI 协助做 UI 文案、交互说明和信息层级优化
• 用 AI 提供设计规则，让页面更稳定、更统一、更符合产品感
• 用 AI 作为“代码审查助手”和“开发流程助手”

这个项目里加入的 AI 相关能力

• 前端设计规则：让生成的页面更清楚、可读、好用
• Code Review 指南：让改动更容易被审查和维护
• Fullstack Developer 指引：帮助把功能需求落成更合理的前端实现
• Find Skills 规则：说明“该改哪里、怎么改会更合适”

2026 年更前沿的 Skill 思路

如果要把这个项目做成更前沿的 AI 开发示例，建议围绕下面几个方向构建 Skill：

1. 设计系统 Skill

让 AI 更懂项目的视觉语言，包括：

• 颜色系统
• 字体层级
• 卡片、按钮、间距规则
• 暗黑/浅色主题一致性

2. 交互体验 Skill

让 AI 在改动时优先考虑：

• 页面节奏
• 动效轻量化
• 可访问性
• 移动端体验

3. 代码审查 Skill

让 AI 不只是“生成”，而且会主动检查：

• 代码是否清晰
• 是否有重复逻辑
• 是否容易维护
• 是否符合当前项目结构

4. 任务定位 Skill

让 AI 更像一个“懂项目结构的助理”，知道：

• 改共享布局时该进哪里
• 改页面内容时该进哪个页面文件
• 新增路由时要同步更新哪些内容

5. 部署与发布 Skill

让 AI 也能根据项目需求，建议：

• GitHub Pages 部署方案
• Vercel / Netlify 发布方案
• 生产构建检查与发布流程

项目结构说明

• src/App.vue：应用主布局和主题切换
• src/pages/：各个页面内容
• src/router/index.js：页面路由
• src/index.css：全局样式与主题辅助样式
• .github/instructions/：项目级技能规则
• .github/workflows/deploy.yml：GitHub Pages 自动部署流程

快速开始

npm install
npm run dev

构建

npm run build

部署到 GitHub Pages

这个项目已经内置了 GitHub Actions 工作流，推送到 main 分支后会自动部署到 GitHub Pages。

你需要做的两步

1. 在 GitHub 仓库里进入 Settings → Pages
2. 将 Source 设置为 GitHub Actions

部署成功后，访问地址通常为：

https://<your-username>.github.io/vue3-AI/

如果你的仓库名不同，访问地址需要对应修改。