6. 使用antd pro构建web页面

作者: 米洛丶 | 来源:发表于2018-11-03 22:16 被阅读808次

前言

在开始之前，希望我们已经掌握了一部分react的知识，由于没有太多经验，其实我也是属于摸索阶段。这里假定我们已经了解了react，redux和dva/umi相关的知识。并有做过相关练习。

如果还不了解以上相关的知识，建议去以下网站学习一遍，下面给出一个大概学习的路线吧。

html/css/js

这里推荐大家去w3cschool稍作了解，不过看本篇文章的同学肯定都是有一定基础的。那么就当做巩固好了。
es6

这里我没有系统看过教程，我是在一本叫做react学习手册的书上面看到的。这里还是放一下地址吧，可以去阮一峰老师的博客看，也可以去这里学习es6的一些新特性。比如箭头函数，promise，let等。
react+redux

react的话，一开始我几乎是没有入门。拿着react-element里的demo就开始实操了，遇到了各种各样的问题。在寻找solution的时候遇到了一本名曰react小书的教程，觉得实在是再合适不过了。同时里面还有redux的部分教程(第三部分)。
dva

dva是一个封装了redux和router等方法的框架，掌握了它的api，可以快速完成react项目的开发。具体教程还请看官网dvajs。

antd pro介绍

antd是ant design的缩写，顾名思义，它是蚂蚁金服的前端设计团队出品的一款UI组件库，如果要类比的话，我会把他比作bootstrap，但是它又远远比bootstrap好看且交互性更强。而antd pro，就是它的专业版。为什么呢，因为antd pro已经是一个完整的中后台项目，我们如果需要快速开发的话，直接拿着里面的页面修改便是了。但是我个人总结了一下，缺点也很明显，就是antd pro做出来的系统几乎都长一个样，长久了会有审美疲劳，至少我对bootstrap也是这样的，当然蚂蚁出的东西品质是真的棒！

话不多说，先看看它的预览页面。

以下是随便截取的几个图片，感受一下它的美。

image.png

下载antd pro

以上内容均来自antd pro官网。

第一步: 克隆项目，我们将之克隆到Lamb的client目录下，由于我不想在Lamb中创建2个git项目，所以我选择去github下载代码。

image.png

如果你想随时升级antd pro或者给它们提pull requests，则执行以下命令。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

下载后解压并放入Lamb/client目录。

image.png

安装依赖包

确保你安装了nodejs，这样你就拥有强大的包管理工具npm
使用npm安装cnpm，因为国内有很多资源是访问受限的，所以需要淘宝开源的cnpm。

在cmd/shell窗口输入并回车。

npm install -g cnpm --registry=https://registry.npm.taobao.org
安装antd pro依赖包

进入Lamb/client目录执行命令cnpm install
image.png image.png
尝试在本地运行antd pro

在Lamb/client目录下输入npm start并回车
image.png
接着浏览器就自动打开了页面http://localhost:8000，那么我们的antd pro就成功部署了。
image.png