# vue3-big-screen

**Repository Path**: akaedu2012/vue3-big-screen

## Basic Information

- **Project Name**: vue3-big-screen
- **Description**: 标准的vue3大屏应用，使用vue3，ts，echarts，datav，mockjs等。本应用为大屏的基础框架，包含了自动化部署，数据mock模拟，大屏布局，hooks，pinia等各种基础功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-02-20
- **Last Updated**: 2025-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目介绍

- 这里一个基于 Vue3、Vite、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "。
- 使用 template实现组件封装，各类型图标支持动态渲染，可根据自身需求进行替换。
- 使用Vite进行项目构建提高了开发和打包效率。
- 项目按照 1920*1080 作为设计稿，支持任何尺寸的同比例缩放。
- 在改项目中除了大屏外，还增加了hooks，mockjs api的使用等。

### 相关技术栈

- Vue3、TypeScript、Vite、DataV、ECharts、Pinia、Axios，mock

### 效果图

<img src="https://raw.githubusercontent.com/huadw/images/main/screen.png" height="400px"/>

### 项目预览

- 项目预览地址：[http://43.139.50.17/](http://43.139.50.17/)


友情链接：

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 xxx.git

# 进入项目
cd big-screen

# 安装依赖
pnpm install

# 运行项目
pnpm run dev

# 打包
pnpm run build

# 从git拉取最新代码
pnpm run update

# 把本地打包后的dist文件发布到服务器
pnpm run release

# 先执行git拉取最新代码，然后打包，最后把打包的代码发布到服务器
pnpm run deploy

# 其他说明
这里的pnpm也可以替换成npm、yarn等，具体使用方法请自行百度。
```
## 交流群🚀

> 如果交流群的二维码过期，加我微信，备注「前端」、「后端」或「全栈」即可。
>
> 为了避免营销广告人群混入，此举无奈，望理解！

| 交流群                                                      | 我的微信                                                       |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <img src="https://raw.githubusercontent.com/huadw/images/main/group.png" height="180px"/> | <img src="https://raw.githubusercontent.com/huadw/images/main/me.png" height="180px"/> |

## 写在最后
> 如果你觉得本项目不错或者对自己工作有帮助，欢迎点个star或者打赏作者一杯咖啡！
<img src="https://raw.githubusercontent.com/huadw/images/main/pay.jpg" height="280px"/>