React Dva项目引入antd UI框架

上文 中我们大家了一个Dva的开发环境 那么 下面 我们就用dva项目引入一下antd 我们平时做react开发 主要也都会选择它

我们直接在项目终端执行

npm  install antd@^4.24.2 babel-plugin-import --save

这样 我们的依赖包就进来了 babel-plugin-import是一个插件 主要是用来做我们按需加载的 我们在antd的文档中也能看到按需加载的讲解

具体使用的话 我们可以访问地址 进入后 我们右上角导航栏中选择 组件 然后 我们在左侧导航栏中 选择自己需要用的组件 然后 点击 下面的显示代码 看一下里面的代码 这样 你就可以看到它的一个实现代码了 但是 我们要先加个配置 打开我们项目 在根目录下找到.webpackrc 添加如下配置

{
          
   
    "extraBabelPlugins": [
        ["import", {
          
    "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
   ]
}

然后 终端输入

npm run start

我们的项目就这样起来了 但是看不出什么效果啊 别急 在根目录下 找到 src下的 routes 这是我们路由的管理 这个后一点再去细说 然后 这里面只有一个组件 就是 我们现在页面加载的组件 我们界面原本的代码是这样的 我们加上

import {
          
    Button } from antd;

引入一下按钮组件 然后在界面上找个位置加上

<div>
   <Button type="primary">Primary Button</Button>
   <Button>Default Button</Button>
   <Button type="dashed">Dashed Button</Button>
   <Button type="text">Text Button</Button>
   <Button type="link">Link Button</Button>
 </div>

这样 我们的代码就进来了