请使用 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 的全局配置

重要约束:

所有注释用中文

样式优先使用 Element Plus 原生组件样式,布局辅助用 CSS(如果 Element Plus 样式不够用再补充)

不要使用 element-ui(Vue 2 的库),统一使用 element-plus

生成完成后,在项目根目录创建GUIDE.md,用中文说明项目结构、运行方法和关键依赖

所有.vue文件使用