案例项目
sunlight-admin 项目结构 📚
GitHub 仓库地址
https://github.com/sunlight-ui/sunlight-admin获取代码步骤
- 克隆仓库
bash
git clone https://github.com/sunlight-ui/sunlight-admin.git- 进入项目目录
bash
cd sunlight-admin- 安装依赖
bash
npm install运行启动项目步骤
- 开发环境启动
bash
# 使用 dev 命令启动（推荐）
npm run dev
# 或使用 serve 命令启动
npm run serve- 生产环境构建
bash
npm run build- 预览生产环境构建结果
bash
npm run preview项目结构
text
├─ public/ # 静态资源文件
│ ├─ smoke.mp4 # 示例视频资源
│ ├─ vite.svg # Vite 图标
│ └─ vue.svg # Vue 图标
├─ src/ # 源代码目录
│ ├─ api/ # API 接口管理
│ │ ├─ modules/ # 接口模块
│ │ │ ├─ RetrieveInputApi.ts # 输入检索接口
│ │ │ ├─ UploadApi.ts # 上传接口
│ │ │ └─ UserApi.ts # 用户接口
│ │ ├─ apiTypes.ts # API 类型定义
│ │ └─ index.ts # API 入口文件
│ ├─ assets/ # 静态资源
│ │ ├─ icons/ # SVG 图标
│ │ ├─ image/ # 图片资源
│ │ │ ├─ error_images/ # 错误页面图片
│ │ │ └─ gif/ # GIF 动图
│ │ └─ mock/ # 模拟数据
│ ├─ components/ # 自定义组件
│ │ ├─ RetrieveInput/ # 检索输入组件
│ │ ├─ SvgIcon/ # SVG 图标组件
│ │ ├─ WangEditor/ # 富文本编辑器组件
│ │ └─ YiInput/ # 输入组件
│ ├─ directives/ # 自定义指令
│ │ ├─ modules/ # 指令模块
│ │ │ ├─ debounce.ts # 防抖指令
│ │ │ ├─ throttle.ts # 节流指令
│ │ │ └─ waterMarker.ts # 水印指令
│ │ └─ index.ts # 指令入口文件
│ ├─ hooks/ # 组合式函数
│ │ ├─ useEcharts.ts # ECharts 钩子
│ │ └─ useTheme.ts # 主题切换钩子
│ ├─ languages/ # 国际化配置
│ │ ├─ modules/ # 语言模块
│ │ │ ├─ en.ts # 英文配置
│ │ │ └─ zh.ts # 中文配置
│ │ └─ index.ts # 语言入口文件
│ ├─ layout/ # 页面布局
│ │ ├─ components/ # 布局组件
│ │ │ ├─ Breadcrumb/ # 面包屑组件
│ │ │ ├─ Footer/ # 页脚组件
│ │ │ ├─ Fullscreen/ # 全屏切换组件
│ │ │ ├─ Guide/ # 引导组件
│ │ │ ├─ Language/ # 语言切换组件
│ │ │ ├─ LayoutHorizontal/ # 横向布局组件
│ │ │ ├─ LayoutVertical/ # 纵向布局组件
│ │ │ ├─ Logo/ # Logo 组件
│ │ │ ├─ Menu/ # 菜单组件
│ │ │ ├─ SettingsDrawer/ # 设置抽屉组件
│ │ │ ├─ Tabs/ # 标签页组件
│ │ │ └─ AppMain.vue # 主内容组件
│ │ └─ index.vue # 布局入口文件
│ ├─ plugins/ # 插件配置
│ │ ├─ nprogress.ts # 进度条插件
│ │ ├─ piniaPersist.ts # Pinia 持久化插件
│ │ └─ request.ts # 请求插件
│ ├─ router/ # 路由配置
│ │ ├─ modules/ # 路由模块
│ │ │ ├─ asyncRouter.ts # 异步路由
│ │ │ └─ staticRouter.ts # 静态路由
│ │ └─ index.ts # 路由入口文件
│ ├─ store/ # 状态管理
│ │ ├─ modules/ # 状态模块
│ │ │ ├─ auth.ts # 权限状态
│ │ │ ├─ global.ts # 全局状态
│ │ │ ├─ keepAlive.ts # 页面缓存状态
│ │ │ ├─ tabs.ts # 标签页状态
│ │ │ └─ user.ts # 用户状态
│ │ └─ index.ts # 状态入口文件
│ ├─ styles/ # 样式文件
│ │ ├─ common.scss # 通用样式
│ │ ├─ element.scss # Element Plus 样式
│ │ ├─ index.scss # 样式入口
│ │ ├─ initLoading.css # 初始化加载样式
│ │ ├─ scroll.scss # 滚动条样式
│ │ ├─ transition.scss # 过渡动画样式
│ │ └─ variables.module.scss # 样式变量
│ ├─ typings/ # TypeScript 类型定义
│ │ ├─ global.d.ts # 全局类型
│ │ ├─ shims-vue.d.ts # Vue 类型声明
│ │ └─ vue3-json-viewer.d.ts # 第三方组件类型声明
│ ├─ utils/ # 工具函数
│ │ ├─ auth.ts # 权限工具
│ │ ├─ color.ts # 颜色工具
│ │ ├─ element.ts # Element Plus 工具
│ │ ├─ index.ts # 工具入口
│ │ └─ mittBus.ts # 事件总线
│ ├─ views/ # 页面组件
│ │ ├─ assembly/ # 组件演示页面
│ │ ├─ directives/ # 指令演示页面
│ │ ├─ echarts/ # 图表演示页面
│ │ ├─ error-page/ # 错误页面
│ │ ├─ form/ # 表单页面
│ │ ├─ home/ # 首页
│ │ ├─ login/ # 登录页
│ │ ├─ menuNest/ # 嵌套菜单示例
│ │ ├─ project/ # 项目页面
│ │ ├─ sunlightCascader/ # 级联选择器组件示例
│ │ ├─ sunlightCheckbox/ # 复选框组件示例
│ │ ├─ sunlightDatePicker/ # 日期选择器组件示例
│ │ ├─ sunlightForm/ # 表单组件示例
│ │ ├─ sunlightInput/ # 输入框组件示例
│ │ ├─ sunlightRadio/ # 单选框组件示例
│ │ ├─ sunlightSelect/ # 选择器组件示例
│ │ └─ sunlightTable/ # 表格组件示例
│ ├─ App.vue # 根组件
│ └─ main.ts # 入口文件
├─ .env.development # 开发环境变量
├─ .env.production # 生产环境变量
├─ .env.test # 测试环境变量
├─ .eslintignore # ESLint 忽略配置
├─ .eslintrc.cjs # ESLint 配置
├─ .gitignore # Git 忽略配置
├─ .prettierignore # Prettier 忽略配置
├─ .prettierrc.cjs # Prettier 配置
├─ .stylelintignore # Stylelint 忽略配置
├─ .stylelintrc.cjs # Stylelint 配置
├─ README.md # 项目说明文档
├─ Vue-ElPlus-Admin-main.rar # 项目压缩包
├─ index.html # HTML 入口文件
├─ package-lock.json # 依赖锁定文件
├─ package.json # 项目配置文件
└─ vite.config.ts # Vite 配置文件