基于create-react-app官方脚手架搭建dva模式的项目（二）

接上一篇：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