React项目 第贰篇 添加AntD

添加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组件的加载。