README.md · Jin-Primary/vue3-big-screen

# Vue3-Big-Screen
![输入图片说明](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/vue3-big-screen/logo.jpg)

### 项目介绍

- 这里一个基于 Vue3、Vite、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "。
- 使用 template实现组件封装，各类型图标支持动态渲染，可根据自身需求进行替换。
- 使用Vite进行项目构建提高了开发和打包效率。
- 项目按照 1920*1080 作为设计稿，支持任何尺寸的同比例缩放。
- 项目参考[原项目](https://gitee.com/MTrun/vue-big-screen-plugin)的界面和设计思路，优化了相关细节，解决了原先项目中的各种错误。
- 项目已经适配移动端H5，有兴趣的朋友可以点击这里[传送门](https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen-mobile.git)。
- 项目中注释了图片压缩vite插件，如需对图片进行压缩可自行安装vite-plugin-imagemin插件 
  ```npm i vite-plugin-imagemin -D 或者 cnpm i vite-plugin-imagemin -D```
### 项目截图
![输入图片说明](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/vue3-big-screen/big-screen_2m.gif)

### 项目预览
- 在线预览地址：https://screen.xkxk.tech

### 源码下载
- gitee下载地址：[项目链接](https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen.git)
- github下载地址：[项目链接](https://github.com/dddggg123/vue3-big-screen.git)
### 相关技术栈

- Vue3、TypeScript、Vite、DataV、ECharts

友情链接：

1.  [Vue3 官方文档](https://composition-api.vuejs.org/zh/api.html#setup)
2.  [DataV 官方文档](http://datav.jiaminghi.com/guide/)
3.  [echarts 示例](https://echarts.apache.org/examples/zh/index.html)
4.  [echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)

### 使用说明
```
# 克隆项目
git clone https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen.git

# 进入项目
cd vue3-big-screen

# 安装依赖
npm install

# 运行项目
npm run dev

# 打包发布
npm run build
```

### 联系作者

- 使用中遇到不懂的问题或者有更好的建议欢迎添加作者微信
- 想要加入技术群学习前端开发也可以联系作者

![作者](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/author/author_wechat.jpg?imageView2/1/w/300/h/300)

### 写在最后

- 如果你觉得本项目不错或者对自己工作有帮助，欢迎点个star或者打赏作者一杯咖啡！

![作者](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/author/author_admire.jpg?imageView2/1/w/300/h/300)

Jin-Primary/vue3-big-screen

简介

发行版

贡献者

近期动态

Jin-Primary/vue3-big-screen .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Jin-Primary/vue3-big-screen