# webScreenView

**Repository Path**: tuvdance/web-screen-view

## Basic Information

- **Project Name**: webScreenView
- **Description**: web大屏可视化框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-18
- **Last Updated**: 2022-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 框架介绍

### 名称

   前端 web 端框架（[代码规范](./explain/前端规范/README.md)）

---

### 简介

   本项目运用前端技术为：html、css、less、javaScript、react、react-router、
redux、react-redux、redux-saga、axios、antd、js-base64、react-router-config

---

### 依赖

- 1、开发工具 WebStorm 或 visual studio code
- 2、打包依赖：webpack（^5.37.0）版本
- 3、转义依赖：babel 系列（^7 版本）
- 4、语法规范依赖：eslint（^7.3.1 版本）
- 5、样式规范依赖：`stylelint(^10.1.0 版本)`、`stylelint-config-prettier(^5.3.0)`、`stylelint-config-standard（^18.3.0）`
- 6、开发框架依赖：react（^16.13.1 版本）

---

### vscode `eslint插件（2.1.8）`、`stylelint插件(0.84.0)`编辑器配置

```
{
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
	"extensions": [".js",".vue",".json"]
    },
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript", {
            "language": "vue",
            "autoFix": true
        },
        "html", {
          "language": "html",
          "autoFix": true
        }
],
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"emmet.includeLanguages": {
"javascript":"javascriptreact"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
}
```

### 相关命令

1. 安装依赖:
   npm install
2. 运行:
   npm run dev
3. 编译:
   npm run build

编译后文件存在 dist 目录下

---

## 框架说明

### 命令（inquirer）式的选择项目启动
启动入口：/webpack/main/dev.js(build.js)
### 每个项目的执行入口

1. html 入口
   /main/project/**/index.html
2. js 入口
   /main/project/**/index.js

---

### 框架总体架构图

![Image text](./explain/架构.png)

---

### 模块划分

1. 容器组件(业务大的模块)务必在 model 文件夹下面建立自己的容器 model，共享状态
2. 业务组件(基本业务模块)根据自己业务需求，定义该模块的状态
3. 容器组件的数据流转图
   ![Image text](./explain/redux的数据流转图.jpg)

### 架构目录说明
# 架构

## 内容组成

### 换算单位

### 文档、代码规范化

### 动画库、图表库

### 布局模板

### webpack、vite构建工具

### 数据管理、驱动、交互

### 公共组件库以及效果展示

### 多项目统一管理

### 单个项目的输出和输入

## 设计

### 换算单位插件

### 开发目录结构

- dll
- explain

	- 前端规范
	- redux的数据流转图
	- 架构

- main

	- common

	  # 公共目录
	  ## 存放规则
	   * http，服务请求的封装
	   * store，全局数据管理
	   * tool，工具集合
	  
	- project

	  # 项目目录
	  ## 目录规则
	   * 项目名称必须以"**"结尾
	   * 项目目录第一层级必须包含"index.html、index.js"文件
	   * 在当前项目中，添加webpack.config.js，可以自己配置相关webpack的config配置,比如publicPath
	   * 项目目录第一层级可以添加配置文件，规则为添加config目录，里面包含了是三个js文件，分别是：system.dev.config.js、system.prod.config.js、systemConfig.js
	  ## 项目优化
	   * 如果需要抽象出来一些静态资源来，则可以建立自己项目中新建excludeStatic文件夹，里面可以放一些静态资源；通过相对路径来访问，比如：/excludeStatic/demo1.png
	  
		- demo
		- demo1
		- .......

- mock

  # 规则说明
  ## 文件规则
   * 项目名称必须以".json"结尾
   * 文件读取并提供对应接口，是在/webpack/nodeServer/的resServer.js内容实现的
   * 请保证接口api的唯一性
   * 每次新增的json文件，请重新启动开发环境
  ## 文件内容规则
  ```
  {
    "servers": [
      {
        "url": "/getName",
        "desc": "获取用户姓名",
        "type": "get",
        "result": {
          "mock|1-10": [
            {
              "id|+1": 1
            }
          ]
        }
      },
      {
        "url": "/modifyName",
        "desc": "修改用户姓名",
        "type": "post",
        "result": {
          "mock": true
        }
      }
    ]
  }
  ```
  
- webpack

	- common

		- optimization.js
		- plugins.js
		- rules.js
		- util.js

	- main

		- build.js
		- common.js
		- dev.js

	- nodeServer

		- init.js
		- resServer.js
		- units.js

	- server.js
	- webpack.base.js
	- webpack.dev.js
	- webpack.dll.js
	- webpack.prod.js

- .eslintignore
- .eslintrc.js
- stylelint.config.js
- .stylelintignore
- .prettierrc.js
- .prettierignore
- .gitignore
- babel.config.js
- package-lock.json
- package.json
- README.md

### 自定义cli

### webpack深入定制

### 配置文件校验

### 各个项目提供各自的webpack.config.js配置文件