<>添加AntD

工程已经存在 我们在工程的基础上添加UI组件库 这里选择的是Ant Design。

<>在项目安装antd依赖

1.安装antd依赖
yarn add antd 或者 npm install antd
本文使用版本 antd - version 3.15.0

2.添加antd 组件代码
// App.js + import {Layout} from 'antd' + const {Sider, Header, Content, Footer
} = Layout class App extends Component { render() { return ( <div className=
"App"> + <Layout> + <Sider>Sider</Sider> + <Layout> + <Header>Header</Header> +
<Content>Content</Content> + <Footer>Footer</Footer> + </Layout> + </Layout> </
div> ); } }
3.添加样式

第一种方式: 在CSS文件中引入
// App.css // 第一行 + @import '~antd/dist/antd.css'; // 其他...
第二种方式:在页面入口的js文件中引入
// App.js // 第一行 + import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' //
其他...
第三种方式:在webpack中使用 babel-plugin-import (推荐)
babel-plugin-import 会帮助你加载JS和CSS,并且实现按需加载
1.安装 babel-plugin-import 依赖
npm install --save-dev babel-plugin-import // 添加在babel转译的部分 // .babelrc or
babel-loader option // webpack.config.js { "plugins": [ 338+ ["import", { +
"libraryName": "antd", + "libraryDirectory": "es", + "style": "css" // `style:
true` 会加载 less 文件 + }] ] }
4.验证结果 和 按需加载
yarn start
不按需加载时请求的文件:

按需加载时请求的文件:

antd文件大概可以减少60%的大小。

这样我们就基本完成了 antdUI组件的加载。

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信