请使用 Vue 3 + TypeScript + Vite + Element Plus + Vue Router 4 + Pinia + Axios 构建一个电商低代码平台的前端项目。
基础目录结构:
src/pages/:页面组件(登录页、首页、编辑器页等)
src/components/:通用组件
src/router/:路由配置
src/stores/:Pinia 状态管理
src/api/:Axios 请求封装和接口定义
src/utils/:工具函数
src/types/:TypeScript 类型定义
src/assets/:静态资源
需要生成的代码:
项目配置:vite.config.ts(含代理配置,将/api请求代理到
路由配置:router/index.ts,包含三个路由:
/login:登录页
/dashboard:管理后台首页
/editor:页面编辑器(暂时留白,只写标题)
布局组件:components/layout/AdminLayout.vue——管理后台的通用布局,包含:
左侧可折叠侧边栏(使用 Element Plus 的el-menu)
顶部导航栏(含用户头像和退出按钮)
中间内容区域(
页面组件:
pages/login/LoginPage.vue:登录页面,包含邮箱输入框、密码输入框、登录按钮,使用 Element Plus 的el-form,UI 完整但暂时不连接后端
pages/dashboard/DashboardPage.vue:仪表盘首页,显示“欢迎使用电商低代码平台”,并调用后端
/api/hello接口展示数据
请求封装:api/request.ts——基于 Axios 的请求封装,包含:
请求拦截器(自动添加 token,从 localStorage 获取)
响应拦截器(统一处理错误,401 跳转登录页)
导出get、post、put、del方法
类型定义:types/api.ts——Result
App.vue:根组件,包含
重要约束:
所有注释用中文
样式优先使用 Element Plus 原生组件样式,布局辅助用 CSS(如果 Element Plus 样式不够用再补充)
不要使用 element-ui(Vue 2 的库),统一使用 element-plus
生成完成后,在项目根目录创建GUIDE.md,用中文说明项目结构、运行方法和关键依赖
所有.vue文件使用