搭建前端基础项目：先把后台外壳跑起来

第一步：先说明这一章只做外壳

这一章不是开始做会员资料、会员等级、会员标签、会员卡这些具体功能。

这一章只做前端项目的基础外壳：把 Vue3 项目创建出来，把后台系统常用的页面结构先搭好，并让它能在浏览器正常打开。

你可以把这一章理解成先把房子的框架搭起来：有登录页、有后台首页、有侧边菜单、有个人中心入口、有几个功能菜单占位。至于每个菜单里的增删改查、接口、数据库，后面章节再一步一步做。

这样做的好处是：后面每一章只需要专心补一个模块，不会一开始就让 AI 一口气生成太多内容，把教程节奏打乱。

第二步：让 AI 创建前端项目和后台外壳

下面这段提示词的目标是：创建前端项目，并做出可以预览的后台基础界面。

这里不用你理解每个文件叫什么，也不用你手动创建文件。你只要把需求讲清楚，让 AI 自己安排文件结构即可。

注意：这里的登录页、个人中心、会员相关菜单都只是静态占位，不要连接后端接口。

复制现在开始搭建会员管理后台网站的前端项目。

请你直接帮我创建并配置好一个 Vue3 前端基础项目，项目名称叫 member-admin-web。

项目基础要求：

1. 使用 Vite 创建 Vue3 项目。
2. 安装 Vue Router、Pinia、Axios。
3. 安装并配置 TailwindCSS。
4. TailwindCSS 请使用稳定方案，安装开发依赖 tailwindcss@3、postcss、autoprefixer。
5. 如果创建 PostCSS 配置，并且里面用到了 autoprefixer，一定要确保已经安装 autoprefixer，避免启动时报 Cannot find module 'autoprefixer'。
6. 配置 /api 开发代理，把前端的 /api 请求转发到 http://localhost:3000。
7. Axios 的 baseURL 使用 /api，但这一章暂时不要写真实接口请求。
8. 启动前端项目时，请使用 Vite 默认端口 5173。
9. 创建完成后，请直接启动前端项目，我需要能在浏览器访问 http://localhost:5173 看到页面。
10. 如果启动时报错，请根据报错继续修复，直到页面可以正常打开。

这一章要做的页面：

1. 登录页。
2. 后台首页。
3. 后台基础布局。
4. 个人中心。
5. 会员资料占位页。
6. 会员等级占位页。
7. 会员标签占位页。
8. 会员卡占位页。

页面要求：

1. 登录页要有系统名称、账号输入框、密码输入框、登录按钮。
2. 这一章登录按钮不请求后端接口，只做前端跳转到后台首页。
3. 后台布局要有左侧菜单和顶部栏。
4. 左侧菜单包含：首页、会员资料、会员等级、会员标签、会员卡、个人中心。
5. 后台首页只做基础欢迎区域和功能入口占位，不要放模拟业务数据。
6. 个人中心只展示基础占位信息，比如头像、昵称、邮箱、角色。
7. 会员资料、会员等级、会员标签、会员卡页面只做占位说明，不要写新增、编辑、删除、查询功能。
8. 页面风格做成企业级后台管理系统，简洁、清爽、专业。
9. 使用 TailwindCSS 的蓝色系作为主题，比如 blue-600、blue-50、slate-900、slate-500。

请你直接完成项目搭建和基础页面，业务功能只做菜单和占位页面。文件怎么拆分、页面文件怎么命名，你根据 Vue 项目常见写法自己安排。

第三步：检查基础页面是否能打开

AI 完成后，大概是这样的 先打开浏览器访问：

复制http://localhost:5173

访问应该可以看到后台管理的页面了，但是还没有接入后端服务和数据库，后面几个章节再慢慢接入。 这一章只检查这些内容：

• 页面能不能正常打开。
• 登录页能不能看到。
• 点击登录后能不能进入后台首页。
• 左侧菜单能不能切换到各个占位页面。
• 页面有没有明显报错。
• 整体样式是否像一个后台管理系统。

如果页面能打开，菜单能切换，基础布局看起来还可以，这一章就完成了。

第四步：如果样式不好看就继续优化

如果页面能打开，但是看起来比较简陋，可以继续让 AI 优化页面风格。

可以复制下面这段：

复制请继续优化当前前端项目的后台 UI，只优化页面样式和基础交互，不要新增真实业务功能。

要求：

1. 登录页要更像企业级后台登录页。
2. 后台布局要有清晰的左侧菜单、顶部栏和内容区域。
3. 菜单选中状态要明显。
4. 首页只保留基础欢迎内容和空状态占位，不要放模拟统计数据。
5. 会员资料、会员等级、会员标签、会员卡页面仍然只保留占位展示。
6. 不要写新增、编辑、删除、查询功能。
7. 不要请求后端接口。
8. 不要设计数据库。
9. 使用 TailwindCSS 蓝色主题，整体风格简洁、专业、清爽。
10. 优化完成后继续运行在 5173 端口，我需要能在浏览器预览。

更新完UI效果 页面风格调整满意后，就进入下一章搭建后端基础服务。 前端常见报错排查 & 处理指南

常见报错排查处理指南

一、页面弹出报错弹窗

页面直接弹出错误提示框时，完整复制弹窗内全部错误信息，发给 AI 即可快速定位修复。

二、页面白屏无任何内容

方案 1（简易版）

• 直接告知 AI：网站打开后整体白屏，无任何展示内容，等待 AI 给出排查方案。

方案 2（精准高效版，推荐）

• 在白屏页面右键鼠标，选择「检查」（开发者工具）；
• 切换到 Console（控制台）标签页；
• 复制页面内所有红色报错文本，粘贴发给 AI，可大幅缩短排错时间。