# vue3-big-screen

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

## Basic Information

- **Project Name**: vue3-big-screen
- **Description**: vue3-big-screen
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-22
- **Last Updated**: 2024-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、项目描述

- 这是一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "，使用 '.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案。

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)，[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)

## 二、主要文件

| 文件                        | 作用/功能                                                      |
| --------------------------- | -------------------------------------------------------------- |
| main.ts                     | 主目录文件，引入注册 自定义组件、DataV 、样式等数据            |
| views/\*                    | 界面各个区域组件按照位置来命名，index 是项目主结构             |
| constant/\*                 | 静态数据项，所有的标题和图标都配置在这里                       |
| utils/\*                    | 全局公共函数（包含屏幕适配函数）                               |
| assets/\*                   | 静态资源目录，放置图片与全局样式（index 文件样式单独放在这里） |
| components                  | 封装的全局渲染组件                                             |
| components/componentInstall | 全局组件注册位置                                               |
| router/\*                   | 路由配置区域                                                   |
| store/\*                    | Vuex 相关区域                                                  |
| src/ \*.d.ts                | 全局类型声明文件                                               |

## 三、使用介绍

### 启动项目

需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后最好是手动全屏查看（按 F11）。
如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。

如果安装完依赖 @jiaminghi 报错 `<template v-for> key should be placed on the <template> tag` 类似的 bug，把此工程目录下的 `other_modules/@jiaminghi.rar` 解压并替换掉 node_modules 里面的同名文件

如果不想每次都修改依赖，可以使用社区封装的 vue3 版本的 DataV：

1. https://gitee.com/kjgl77/datav-vue3
2. https://gitee.com/wangbin3162/bin-datav?_from=gitee_search

### 屏幕适配

屏幕适配方案放弃了 rem 方案，使用更通用的 `css3：scale` 缩放方案，项目的基准尺寸是 `1920px*1080px`，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw.ts` 中，通过 `ref` 指向 `views/index` ，可以自行修改方案。

**最新的低代码大屏系统 GoView 已开源，详见：[https://gitee.com/MTrun/go-view](https://gitee.com/MTrun/go-view)**
![输入图片说明](https://gitee.com/MTrun/go-view/raw/master/readme/logo-t-y.png)