1. 最流行的开源React UI组件库
文章目录
1). material-ui(国外)
官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui
2). ant-design(国内蚂蚁金服)
官网: https://ant.design/
移动官网: https://mobile.ant.design/index-cn
github: https://github.com/ant-design/ant-design/
Github: https://github.com/ant-design/ant-design-mobile/
2. ant-design使用入门
1). 使用create-react-app搭建react开发环境
npm install create-react-app -g
create-react-app antd-demo
cd antd-demo
npm start
2). 搭建antd的基本开发环境
1. 下载
npm install antd --save web端
npm install antd-mobile --save 移动端
2. src/App.js
import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="app">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
3. src/App.css
@import '~antd/dist/antd.css';
.app {
text-align: center;
}
3). 实现按需加载(组件js/组件css) 官网有若干种方式
1. 使用eject命令将所有内建的配置暴露出来
npm run eject
2. 下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)
npm install babel-plugin-import --save-dev
3. 修改配置: config/webpack.config.dev.js
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
options: {
+ plugins: [
+ ['import', { libraryName: 'antd', style: 'css' }],
+ ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true
}
},
4. 去除引入全量样式的语句: src/App.css
@import '~antd/dist/antd.css'
或者
- 下载依赖包
引入 react-app-rewired 并修改 package.json 里的启动配置
npm install react-app-rewired customize-cra --save-dev
由于新的 react-app-rewired@2.x 版本的关系,还要下载安装 customize-cra。
npm install customize-cra react-app-rewired --save-dev
npm i less
npm i -D less-loader
使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
- 修改默认配置:
- 修改代码 package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
- 建立配置文件 config-overrides.js
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
- 更改引用方式
// import 'antd-mobile/dist/antd-mobile.css'
//无需再引用css
// import Button from 'antd-mobile/lib/button'
// import Toast from 'antd-mobile/lib/toast'
import {Button, Toast} from 'antd-mobile'