EOS [从零开始 DAPP 开发] 16 - 使用 Ant Design 进行前端 UI 设计和开发

pendingauth · 2019年08月31日 · 43 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1349086660

上一篇文章实现了使用Scatter登录到DAPP,但DAPP并没有内容,这篇文章开始进行前端界面的开发。

Ant Design

Ant Design是蚂蚁金服出品的React UI组件库,对于“单打独斗”的开发者来说最合适不过了,在没有UI设计人员的情况下也能做出还不错的UI。

安装Ant Design使用如下的命令(antd 是Ant Design的node模块,另外3个模块是配置 antd 时要使用的):

npm install antd --save
npm install babel-plugin-import --save
npm install react-app-rewired --save
npm install customize-cra --save

或者使用一条命令安装以上模块:

npm i -S antd babel-plugin-import react-app-rewired customize-cra

安装好后,需要进行antd配置,配置方法查看这里:

在 create-react-app 中使用 antd

需要修改package.json,并在项目根目录创建一个配置文件config-overrides.js,用于修改antd默认配置。

使用Ant Design创建UI

做好配置后,就可以使用antd创建UI了,打开Ant Design的官方文档:

https://ant.design/docs/react/introduce-cn

官方文档上有很多可用组件和示例代码,使用Layout组件进行经典的三段式布局:

使用antd修改App.js中的代码:

可以看到,antd使用自定的React组件(Layout、Button等)替代html原生的标签,对UI进行改造。

得到如下UI效果:

自定义Ant Design主题

Ant Design的UI主题风格是可以自定义的,自定义主题需要用到less变量覆盖功能(less是一种CSS预处理语言),customize-cra中提供的less相关的函数addLessLoader可以用来帮助加载less样式。

需要安装less和less-loader,命令如下:

npm install less less-loader --save

到目前为止,package.json的dependencies已经有如下依赖项:

除去React自带的react、react-dom、react-scripts之外,已引入12个第三方模块。

然后修改config-overrides.js文件:

使用less语言在modifyVars中添加要配置的选项,这里修改了主题色和背景色,更多可定制选项可以到官方文档查看,修改后的样式是这样的:

Tips

微文DAPP项目源码已添加更多功能,比如使用antd提供的通知提醒框代替console.log提示信息:

还有打开网页时自动检测Scatter中的EOS账户是否已登录、把CSS样式提取到App.css文件中、src/api的代码结构优化等,限于篇幅就不列出了;

代码均已经上传到Github:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册