# Nymo-简单大屏项目模板-组件拖拽生成代码-Three.js-后台表单模板

**Repository Path**: KingRain.NET/vue3-ts-template

## Basic Information

- **Project Name**: Nymo-简单大屏项目模板-组件拖拽生成代码-Three.js-后台表单模板
- **Description**: 简单大屏项目模板/ 组件拖拽生成代码/ Three.js/ 后台表单模板

脚手架: Vite

框架: Vue3

语言: TypeScript

测试: Mock

组件: ElementUI-Plus
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-11-28
- **Last Updated**: 2021-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简单大屏项目模板/ 组件拖拽生成代码/ Three.js/ 后台表单模板

Author : Wudong Nymo



开发相关使用内容:
```
脚手架: Vite
框架: Vue3
语言: TypeScript
测试: Mock
组件: ElementUI-Plus
开发时间: 2021-11-16 - 2021
```

![](https://gitee.com/wudongo/vue3-ts-template/raw/master/screenshot/bigScreen.jpg)

![](https://gitee.com/wudongo/vue3-ts-template/raw/master/screenshot/threeD.jpg)

![](https://gitee.com/wudongo/vue3-ts-template/raw/master/screenshot/tools.jpg)


### 启动方法
npm install
##### 开发模式(with mock)
npm run dev
##### 生产模式(without mock)
npm run pro
##### 打包
npm run build


### 项目结构
```
|-- Template Project
    |-- .env                    ###### 生产模式环境
    |-- .env.development        ###### 开发模式环境
    |-- shims-vue.d.ts          ###### 类型接口声明
    |-- echarts.d.ts            ###### echarts类型声明
    |-- index.html              ###### 渲染页面
    |-- package-lock.json
    |-- package.json
    |-- README.md
    |-- tsconfig.json           ###### ts配置
    |-- vite.config.ts          ###### vite配置
    |-- mock                    ###### mock
    |-- public
    |-- src
        |-- App.vue                   ###### 初始页面
        |-- env.d.ts                  ###### *
        |-- main.ts                   ###### 入口
        |-- api                       ###### 接口
        |-- assets                    ###### 资源文件
        |   |-- thumbnail             ###### 资源缩略图
        |-- components                ###### 子组件
        |   |-- decoration            ###### 装饰组件
        |   |-- SvgIcon               ###### svg组件
        |   |-- drag                  ###### 拖拽组件
        |-- configs                   ###### 配置文件
        |-- icons                     ###### 图标文件
        |-- router                    ###### 路由
        |-- store                     ###### vuex
        |-- styles                    ###### 样式
        |-- util                      ###### 公共工具类
        |-- views                     ###### 页面
```

### 界面
####  1、登录界面
path: #/login



### 功能
####  1、基本登录功能
输入框回车 下行聚焦、登录
####  2、基本注册功能
用户注册
####  3、菜单详解
#####  3.1、 数据可视化
###### 3.1.1: 大屏幕
简单大屏幕项目的实例
** 目前仅实现具体实例, 后续更新将制作成占位型可拖拽式组件库。
###### 3.1.2: 数据曲线

###### 3.3、 在线工具

```
(a) 支持组件拖拽到编辑区 √
(b) 配置编辑区中组件外观 √
(c) 编辑区中组件的锁定、解除锁定 √
(d) 编辑区中组件的复制、粘贴 √
(e) 编辑区中组件的删除 √
(f) 编辑区中组件的拖拽 √
(g) 编辑区中组件的变量双向绑定 -
(h) 编辑区中组件的缩放、旋转 -
(i) 页面代码生成(暂无css文件) √
```

组件库:
elementUI:
1、Button
2、Card
3、文字
4、走马灯
5、表格

外观配置:
1、z-index


###### 3.6、 其它项目

使用iframe嵌入其它Vue项目: Three.js实现的机器人项目

####  5、开源库参考
此处列出了各种作者使用过的、比较常用的一些开源插件、组件库，点击后可直接链接至官网
#### *、 附加功能
背景切换(右上角)、全屏化(右上角)、大屏化(页面右侧)

### 修改说明

路径缩写是在vite.config.ts中配置的
####  1、修改菜单配置
可在 configs/menu.ts 中修改菜单配置
####  2、图标更改
图标的SVG文件皆放置于 icons 下，替换对应的svg图片即可
####  3、登录/注册的表单规则更改
可在 configs/login.ts 中修改登录规则配置
可在 configs/register.ts 中修改注册规则配置
####  4、Echarts图表修改
图表配置的修改可在 views/dataVisual/configs/options.ts 中修改
图表长宽样式等可在 views/dataVisual/configs/charts.scss 中修改
#### *、 其它修改
欢迎咨询


### 项目BUG
```
1、 el-menu 展开动画失效
2、 所有transition进场动画都失效
```



###  后续工作
```
1、 完善在线工具中的功能
2、 处理项目BUG
```