接上一篇:https://blog.csdn.net/xw505501936/article/details/80621740
先来看下现有项目:
点击 去BBB页面 如下:
点击 去CCC页面 如下:
好,以上是现有项目情况。
下面我们让页面稍微美观一些,引入UI库,这里依然选用阿里系的antd(具体不做介绍,有兴趣的同学可取官网查阅,此UI库也有针对angular的版本,也有mobile移动版,还有自己的antd脚手架,很优秀的UI库哦)
1 安装antd
cnpm i antd --save
修改AAA.js文件:
import React, { Component } from 'react'; import { Link } from 'dva/router'; import { Button } from 'antd'; class AAA extends Component { render() { return ( <div> <p> AAA页 </p> <Link to={'/aaa/bbb'}> <Button type={'primary'} icon={'link'}> 去BBB页面 </Button> </Link> <br /> <Link to={'/ccc'}> <Button type={'default'} icon={'enter'}> 去CCC页面 </Button> </Link> </div> ); } } export default AAA;
然后运行npm start,不出意外,会按预期出现按钮形态的页面,好我们刷新页面:
为什么没有样式?
对没错,使用antd的时候,还需要一些配置,
2 样式引入,antd官方给出两种引入方式:
(1)全局一次性引入样式
(2)按需加载样式(当然我们最终会使用这种咯)
首页说一下全局一次性引入方式:
在src下的index.css目录中直接@import '~antd/dist/antd.css'; 引入即可,刷新页面如下:
但是这种一次性把样式文件全部引入,对资源的占用和性能消耗不友好,故我们采用按需引用方式。
这里特别说明:按需引入的方式,与之前我们穿件create-react-app项目时,是否eject暴露配置不同,也就是没有eject的引入方式和eject过的引入方式有差异;因我们的项目暴露配置了,这里只讲eject过的配置方法,至于未eject的配置方法antd官方有详细说明:https://ant.design/docs/react/use-with-create-react-app-cn
3 安装babel-plugin-import,这是一个用于按需加载组件代码和样式的 babel 插件
cnpm i babel-plugin-import --save //antd按需加载
首先去除index.css中的引入;
然后修改相关配置,有两种方式可处理,二者选其一即可:
(1)package.json文件中找到babel配置项增加如下代码:
"plugins": [ [ "import", { "libraryName": "antd", "style": "css" } ] ]
修改完后如图:
此时,重启服务,刷新页面即可看到:
(2)第二种方式需修改config目录下的webpack.config.dev.js和webpack.config.prod.js,切记开发环境和生产环境一并修改了,一遍之后编译打包时,避免不必要错误;
打开文件,搜索babel-loader,找到options添加如下:
以上两种方式均可实现,antd样式的按需引入,觉得OK吧,NO NO NO,到现在我们引入的都是css,其实我们知道less和sacc才是样式的王者,没错接下来,快乐的吧css替换为less吧(antd官方也推荐使用less方式,便于样式覆盖和主体定义,灵活性可想而知)。
4 less样式配置
同样,此处的配置页分为eject过的项目和未eject的项目两种,后者antd逛网有详细描述,可参考,此处只讲本项目中的配置方式,要用less,当然少不了安装less和less-loader了,运行安装:
cnpm i less less-loader --save
默认的脚手架中不支持less的,那我们就要配置咯,打开webpack.config.dev.js和webpack.config.prod.js,记得两者一并修改了;
步骤1 找到 .css 修改为 .(css|less)
步骤2 在use中增加代码,引入less-loader:
{ loader:require.resolve('less-loader'), options: { javascriptEnabled: true } }
如图:
步骤3 修改package.json的babel配置项:
style项可设置为true或者“css”均可
步骤4 修改src下index.css为index.less
步骤5 修改src下index.js中引入的index.css为index.less 如图:
至此,重启服务npm start刷新页面:
less配置已经成功。
转下一篇:https://blog.csdn.net/xw505501936/article/details/80625626