前言：前言都是废话，需认真阅读，UI框架很重要除非你想都自己写
UI框架选择:
...
目前能入吾眼就上面三，（又吹牛了，其实是因为我只接触过这三货），选择其中的 Ant-design进行项目开发： ant-design官网
实战：添加antd UI框架到项目中
使用react-create-app创建项目后结构如下：
启动项目：npm start
界面如下：
添加antd库: npm install antd --save
修改src/App.js:
添加以上两行代码，运行后界面如下：
界面上多了一个 click me 的按钮
问题来了，这按钮太丑了，说好的漂亮的UI框架呢，这种按钮我自己都能写了？
样式有问题一般就是css的问题，css文件没有加载到，解决问题的通常做法就是在src/App.js中直接加入antd的css文件。
import 'antd/dist/antd.css';
加上后运行结果如下：
好了终于看到蓝色的按钮了。antd UI官方文档组件中都有说明，到这里antd UI的组件都可以在我们项目里面使用，O了。
不对！文档里面说的推荐什么按需加载是什么鬼？
其实就是为了性能，antd.css文件包含了所有组件的css样式，我们只用到按钮组件却加载了整个框架的css有点浪费。所以就搞个按需加载，用到哪个组件才加载哪个组件的css/less文件。
不过我们目的已经达到，在项目里面已经可以正常使用antdUI了。对于react-create-app创建的框架如何配置按需加载，antd官方文档只提到以下的方式（懒，直接截图了），哎！下面的还是先不要看了，咱们都能用了，性能后面再说！
妈的， babel-plugin-import是什么鬼？ 使用babel-plugin-import的话那段配置要加到哪里去，我们项目貌似就只有package.json这个一个配置文件！
react-create-app帮我们把webpack、babel的配置都给隐藏起来了，初学者可以到此为止。
怎么让react-create-app的项目可以自定义配置webpack、babel的配置：使用react-create-app eject命令将webpack、babel等隐藏配置文件显示出来，然后手动修改。webpack、babel相关知识自行学习。
网友评论