使用Ant Design Pro,一个企业级开箱即用的中后台前端
#目录
** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! **
文章目录
- @[toc]
- Ant Design Pro
- 了解
- 知识储备
- 安装使用
- 方法一:clone
- 实践
- ESlint
- 细嚼慢咽
- 细嚼慢咽01理解目录文件结构【2018.9.13】
- 细嚼慢咽02设置你想要的pro布局【2018.9.13】
- 细嚼慢咽03创建新页面
- 新手常遇到的问题
- 实战代码Download
- 快捷链接
- 个人不打算从事程序媛,单纯为兴趣学习不定时更新 。其他特别代码都因为某些原因分开放置以下库
Ant Design Pro
了解
Ant Design Pro 是一个企业级开箱即用
的中后台
前端/设计解决方案。符合阿里追求的**“敏捷的前端+强大的中台”**的思想。
Ant Design Pro官网 ClickHere 》
前台/中台/后台的理解:
- 前台要求个性化,能体面公司的特色和对用户需求的满足(理解为用户看的页面)
- 中台是第三方业务运营方,是公司把部分业务开放后,为别的公司的业务赋能(实现可抽离的,非单纯属于公司内部运营业务,比如:定位,AI,语音,图像识别等)
- 后台是公司内部的业务运营平台(公司内部运营)
开箱即用的理解:
out-of-the-box:创造性的,非传统的,立即可以用的
。
以我个人来看,在没使用Ant Design Pro的时候,做的中台用的都是像基于Bootstrap框架的ACE后台模板。点击这个ACE github,你可以看到这个是基于一堆的html网页,以及对应的js插件,其中你要用到那些效果就用对应的插件js文件,一开始可能还找不清那个文件是那个插件,插件的改造也难,后期维护难,没有一个很好的架构支撑类MVC思想,好在UI是不怎么写了,然而一个页面也会因为一个无需那么负责功能的插件而导致过大。而Ant Design Pro基于React
,用了DvaJs这个基于 redux、redux-saga 和 react-router 的轻量级前端框架,将该项目以MVC的模式搭起来了,数据,组件用起来那也是风生水起,easyQAQ,clone下来后很多功能都是分装好,你可能只需要调个数据。。数据。。就ok了。。。环境也就有NPM,有node就ok,安装一下里面包里的依赖,你就可以查看使用里面的东西,并且拥有已经配置好了的严谨的开发格式(在devDependencies: 项目在开发和测试环境中依赖的包),用于协作代码的统一,语法的完整性。等等。
(PS:大一的时候还觉得ACE的UI很高大上,用了Ant Design Pro才觉得甩了ACE不知道多少条街。。)
知识储备
HTML | Less | ReactJs | ES6 | DvaJs(新PRO用umiJs) | Ant Design |
---|---|---|---|---|---|
\ | 我的笔记 Click Here>> | 我的笔记 Click Here>> | 我的笔记 Click Here>> | \ | \ |
\ | 文档 Click Here>> | 文档 Click Here>> | 文档 Click Here>> |
dvaJs文档 Click Here>> umiJs文档 Click Here>> |
文档 Click Here>> |
安装使用
方法一:clone
git clone https://github.com/ant-design/ant-design-pro.git --depth=1
cd ant-design-pro
npm install
npm start
##方法二: ant-design-pro-cli
全局安装集成化的 ant-design-pro-cli 工具,以后只需要pro new就可以直接构建这个项目了。个人是比较喜欢使用这个的。
npm install ant-design-pro-cli -g
mkdir pro-demo && cd pro-demo
pro new
依赖包安装完之后就可以开启项目了
npm start
若有报错可借鉴文末的:新手常遇到的问题
实践
ESlint
ESLint是一种用于识别和报告ECMAScript / JavaScript代码中的模式的工具,其目标是使代码更加一致并避免错误。
package.jspn里devDependencies放置项目在开发和测试环境中依赖的包,其中最明显作用的就是ESlint的包,这是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
开发过程中获得ESlint错误显示可给编辑器进行设置,此处以webstorm编辑器作为例子
若语法有错误,则如下图,显示红色波浪线,以及右边的红色色块提示。
其中还配合 eslint-config-prettier依赖实现规范代码格式。修改.prettierrc文件可设置自定义要求的规范格式。
细嚼慢咽
【2018.8.29】过两天实习完,要准备要开学的事宜,觉得此处要写详细得一段时间,提前发表,详细几天后再更=v =~~~
【2018.9.7】开学至今都在实训以及处理实习证明,今天才知道antDesignPro在9月3号推了新版本v3.9.0,至此页面看起来没什么变化,目录上有了不少改变。其中npm i和cnpm i 都可以安装成功了。待我回炉重造!=n =。。。升级2.0迁移文档:前端构建工具从 roadhog 升级到了 UmiJS!! clickHere》
细嚼慢咽01理解目录文件结构【2018.9.13】
dva 项目之前通常都是这种扁平的组织方式
(即插件即插件、页面即页面、model即model的组织),用了 umi 后,可以按页面维度进行组织
(即model、component**按照功能/页面维护**
进行目录组织)。
详细可参考:使用 umi 改进 dva 项目开发
├── config # umi 配置,包含路由,构建等配置!
│ - router.config.js ## 配置定义每个页面的布局、全局菜单的配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板├── page01 ##同类型页面文件夹├── models ##对应页面处理数据和逻辑的model- page011.js- page012.js├── ss- s.js- page011.js ##页面- page012.js- page01.less├── page02├── models-page021.js- page021.js- defaultSettings.js ##页面默认总体布局配置
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
特点:结构更加清晰了,减少耦合
(独立,增加可维护性,),一删全删,方便 copy 和共享。
细嚼慢咽02设置你想要的pro布局【2018.9.13】
修改src/defaultSettings.js文件。
module.exports = {navTheme : ' dark ',//导航菜单的主题primaryColor : '#1890FF ',//蚂蚁设计的原色layout: ' sidemenu ',//导航菜单位置:sidemenu或topmenucontentWidth : ' Fluid ',//内容布局:Fluid或Fixed,仅在布局为topmenu时有效fixedHeader : false,//粘性标题autoHideHeader : false,//自动隐藏标题fixSiderbar : false,//粘性siderbar
};
细嚼慢咽03创建新页面
待续。。。
新手常遇到的问题
【2018.9.3号之后的v3.9.0版本无此问题!】当npm start不能启动完成后会自动打开浏览器访问,但是报错的是The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean.
解决:如果只是初始项目,把项目中的node_modules文件删除,然后npm install PS:不要用cnpm!!!不要用cnpm!!!不要用cnpm!!!
问题具体查看issue,大部分问题都有 ClickHere 》
实战代码Download
还没push,待续。。。
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~
个人不打算从事程序媛,单纯为兴趣学习不定时更新 。其他特别代码都因为某些原因分开放置以下库
coding个人主页 Click Here>>
码云个人主页 Click Here>>
使用Ant Design Pro,一个企业级开箱即用的中后台前端相关推荐
- 漂亮的实力派 Ant Design Pro 2.0 正式发布
1.0 发布之后,Ant Design Pro 受到了业界广泛关注和使用,GitHub 上 star 数一路增长到 11,686 个,在蚂蚁金服内部也落地数百个中后台应用. 在这 8 个月内,2.0 ...
- UmiJS TypeScript Ant Design Pro v4 从零开始实战教程(63 个视频)
UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频) Antd Pro 是国内最流行的前端后台框架,使用它可以轻易搭建一个超级 ...
- Ant Design Pro 菜单自定义 icon
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持 使用 ant.des ...
- ant design pro 上传excel示例
ant design pro 上传excel示例 前言 TS java model 前端展示 前言 大家好! 最近在学习使用ant design pro ,本人是java后端,没有专业的学习过reac ...
- 前端开箱即用的中后台管理模版,建议收藏
开箱即用的中后台管理模版,建议收藏! 今天来推荐几款开箱即用的中后台管理模版! Vue Element Admin vue-element-admin 是一个后台前端解决方案,它基于 vue2 和 e ...
- 大前端开箱即用的中后台管理模版,建议收藏
Vue Element Admin vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18n 国际化解决方案 ...
- vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...
- Ant Design Pro 企业级后台实战(73 个视频)
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
- 【Ant Design Pro 一】 环境搭建,创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
最新文章
- 海量数据处理_国家重点研发计划“面向异构体系结构的高性能分布式数据处理技术与系统”简介...
- C#和javascript的简单交互
- python协程库_python中协程的详解(附示例)
- 算法与数据结构 (三) 二叉树的简单应用 二叉查找树,二叉堆排序
- python中的多线程-共享全局变量
- 一个交易平台源码,全源无接口
- MongoDB(window安装及服务配置)
- Screen命令让Linux shell在后台运行
- opencv思维导图
- 思维导图软件Mindmanager2018下载
- win10安装红警运行出现FATALString Manager failed to initilaized properly
- LimeSDR srsLTE实验
- 【uniapp】微信小程序国际化详细版
- 基于Socket实现远程木马
- 写论文有哪些神网站?
- Java 平衡二叉树之单旋(左旋,右旋)与双旋
- 100 个网络基础知识普及
- F - Queen Collision (模拟题,找规律)
- 目标检测学习笔记1---RCNN、SS、SVM
- 即将开学,为校园网络安全助力