我的账号在Github开启2FA设置后，因某种原因丢失恢复码导致账号无法登录，日后该账号下的所有项目在github不再更新，若想查看持续更新的项目请移步到 我的码云仓库
xlong-big-data是一个基于 Vite + Vue3 + Element Plus + Pinia + ECharts 开发的单页面客户端渲染的自适应数据监控平台示例，包含2种预览模式。
一套设计稿，根据平台（移动端、PC端和超宽屏幕设备）自适应展示对应内容
固定设计稿，根据屏幕保持原来的高宽比进行自适应缩放，适合用于指定屏幕尺寸展示的情况
- 该项目仅作学习参考，请勿商用
新增图表、标题、边框等组件示例
- 前端：Vite + Vue3
- 后端：Mock.js模拟请求
Vue3
Vite
Pinia
Mockjs
Element Plus
ECharts
Swiper
vue3-seamless-scroll
gif文件稍微有点大，被压缩了，丢失了部分色彩：
- PC界面
- 宽屏界面
- 移动端界面
- 自适应展示
- 组件示例
│ .env.development // 开发环境配置
│ .env.production // 生产环境配置
│ .env.release // release环境配置
│ .gitignore
│ package.json
│ vite.config.js // 配置文件
│ README.md
│ index.html // 入口文件
│
├─pubilc
│ favicon.ico // 图标
│
├─src
│ │ main.js // 项目入口js
│ │ permission.js // 路由权限
│ │ components.js // 全局注册组件
│ │ element-plus.js // element plus配置
│ │ settings.js // 设置文件
│ │ App.vue // 根组件
│ │
│ ├─assets // 资源目录，这里的资源会被wabpack构建
│ ├─api // api接口文件
│ ├─styles // 样式
│ │
│ ├─store // 应用级数据（state）
│ │ │ index.js
│ │ │
│ │ └─modules
│ │
│ ├─hooks 钩子函数
│ │ │ index.js
│ │ │
│ │ └─modules
│ │
│ ├─mock // 模拟请求数据
│ │ │ index.js
│ │ │ mock-handle.js // 数据处理
│ │ │ mock-server.js // 正式环境使用配置
│ │ │
│ │ └─modules
│ │
│ ├─components // 组件
│ │ │
│ │ ├─common // 通用组件
│ │ │
│ │ ├─screen // 大屏组件
│ │ │
│ │ └─charts // 图表组件
│ │
│ ├─directives // 自定义指令
│ │ │ index.js
│ │ │ utils.js // 工具
│ │ │
│ │ └─modules
│ │
│ ├─views // 视图
│ │ │
│ │ ├─home // 首页
│ │ ├─adpt-multi-device // 多设备自适应示例
│ │ ├─adpt-scale // 自适应缩放示例
│ │ └─test // 保留的测试页面
│ │
│ ├─utils // 通用工具函数
│ │ index.js
│ │ auth.js // 读写token
│ │ calendar.js // 日历
│ │ request.js // 请求配置
│ │
│ └─router // 路由配置
│ │ index.js
│ │
│ └─modules // 分模块的动态路由
│
└─static // 静态资源
- 安装依赖
npm install
- 运行项目
npm run dev
QQ：381612175 TEL: 18376686974
github：https://github.com/xLong1029/