示例项目
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 # 布局入口文件
│ └── 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 配置文件