持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

前言

前面的React Route知识全部学完了，在之前文章中我自己用Vue使用了其相关的Element UI做了一个简单后台。今天学习一下使用React相关的UI组件库ant Design。

ant Design是蚂蚁金服前端团队出品的，一开始就为React提供的UI组件库，ant Design 组件库和Element UI组件库是专门为后台管理系统做的UI组件库，还有现成的admin后台demo框架。

安装yarn

yarn是facebook专门为React开发的包管理工具，当然也可以使用node.js自带的npm，使用yarn包管理工具理论上说更快。有并行安装和离线安装的能力。

使用命令npm install -g yarn全局安装yarn

查看yarn的版本yarn --version：

然后设置淘宝源加速包下载速度：yarn config set registry https://registry.npm.taobao.org -g。

新建React项目

使用yarn重新新建一个React项目:

create-react-app my-app

项目目录名为my-app，进入my-app目录使用yarn安装这个UI库。
ant Design文档地址：ant Design

yarn add antd

最简使用

当前目录结构：

修改App.js: 注意要单独引入组件，和相关样式：


import './App.css';
import { Button } from 'antd';
import 'antd/dist/antd.css'; 

function App() {
  return (
    <div className="App">
    <Button type="primary">Button</Button>
  </div>
  );
}

export default App;

使用yarn启动脚手架： yarn start
自动打开浏览器查看效果：

右上角的插件也变成红色了，红色的是调试模式

更换主题色

在之前学习嵌套路由的时候看到了ant Design pro 通用业务业务模板整体的主题颜色为蓝色，现在学习一下怎么修改这个主题色，更换主题色需要用到less，之前没用用过less，只听说过less。

less叫做Css预处理语言，它扩充了CSS语言，增加了变量、混入、函数等等，让CSS更加易维护、切换主题。
了解一下less中使用变量：

@my_height:100px;
@my_color:#FFF;
div { // 可以直接使用的变量，直接@变量名进行引用
width: @my_height; color:@my_color;
}

使用嵌套结构：

div{
    corlor:#fff;
    div{
        color:#000;
    }
}

mixin混合函数：

.p1 { 
    color: red;
} 
.p4 {

    .p1();  //复制样式
}

函数&计算：

div { 
    color:average(#FFF, #000);
}
span{
    height: 20px * 2;
}

切换ant Design主题色

测试了一下与官方文档有一点点出入
使用yarn add @craco/craco和yarn add craco-less命令安装自定义配置包和less编译相关依赖包。将App.css改为App.less，内容改为：

@import '~antd/dist/antd.less';

App.js修改为：


import './App.less';
import { Button } from 'antd';

function App() {
  return (
    <div className="App">
    <Button type="primary">Button</Button>
  </div>
  );
}

export default App;

在根目录下新建craco.config.js:

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

修改启动命令,修改package.json，找到script这个对象，修改:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

现在使用yarn start启动脚手架，看到颜色变成了绿色

React 学习笔记（27）React 使用ant Design

前言

安装yarn

新建React项目

最简使用

更换主题色

切换ant Design主题色