All Projects → LIAOJIANS → large-screen-template

LIAOJIANS / large-screen-template

Licence: other
React+ts+qiankun大屏实战模板

Programming Languages

CSS
56736 projects
typescript
32286 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects
Handlebars
879 projects

React + tsx + qiankun + DataV 实现可视化大屏模板

在线预览地址:http://lscreen.liaojs.cn/

需要掌握知识:

  1. React + tsx 全家桶
  2. qiankun
  3. DataV
  4. plop
  5. scp2
  6. Mock.js 模拟后端请求

生成项目那些就不多说了,直接步入正题!

项目目录

├── mock/                          // mock 服务端数据模拟
├── public/                        
└── src/
    ├── .setting/                  // plop 自动生成文件模板配置
    ├── api/                       // 请求接口存放
    ├── common/                    // 公共接口
    ├── components/                // 公共组件目录
    ├── module/                    // 全局基类以及上下文存放位置
    ├── static/                    // 静态资源管理
    ├── store/                     // 状态管理目录
    ├── utils/                     // 工具函数目录
    ├── pages/                     // 页面组件目录
    ├── App.tsx
    ├── index.tsx
    ├── shims-vue.d.ts
├── plopfile.ts                    // 自动生成模板文件
├── upload.server.ts               // 自动上传指定服务器ftp
├── prettier.config.js             // 保存自动格式化
├── tsconfig.json                  // TypeScript 配置文件
├── config-overrides.js            // 项目配置文件
└── package.json

运行流程

** 主项目跟子项目都必须装包运行起来 **


  npm install

  npm start

界面

1.登录页 Image text

2.首页1 Image text

2.首页2 Image text

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].