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

接上一篇：http://www.javashuo.com/article/p-eitivxir-gv.html

先来看下现有项目：

点击 去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