P10:如何使用Ant Design UI

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P10:如何使用Ant Design UI相关的知识,希望对你有一定的参考价值。

阐述

如何在Next.js框架下使用 Ant Design,是我们每个前端人必会的,所以决定单独整理一篇笔记来讲一下,希望对你有帮助。

Ant Design是一款阿里开源的前端组件库,我在工作中也一直在使用,我觉的它是目前阿里开源的前端项目最成功的,使用人数也是最多的一个。不过它的初心是用来搭建项目的中后台系统,比如后台的管理系统。从React的角度来讲,它就是一个组件库,里边封装了开发中最常用的一些组件,让我们可以通过简单的配置就可以使用他们。

让Next.js支持CSS文件

在前面的笔记中我讲过Next.js默认是不支持CSS文件的,它用的是 style jsxwei,也就是说它是不支持直接用import进行引入css的。

在根目录下新建一个文件夹static,在文件夹下建立一个test.css文件,写入一些CSS Style。

body
    color:green;

然后用 importheader.js里引入。

写完这些后到浏览器中进行预览,没有任何输出结果而且报错了。这说明Next.js默认是不支持CSS样式引入的,要进行一些必要的设置,才可以完成。

开始进行配置,让Next.js支持CSS文件

先用yarn命令来安装 @zeit/next-css 包,它的主要功能就是让Next.js可以加载CSS文件,有了这个包才可以进行配置。

npm install --save @zeit/next-css

也可用yarn命令来安装@zeit/next-css包

yarn add @zeit/next-css

包安装好以后就可以进行配置文件的编写了,建立一个next.config.js,这个就是Next.js的总配置文件(如果感兴趣可以自学一下)。

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined')
    require.extensions['.css']=file=>


module.exports = withCss()

这段代码你有兴趣是可以看看的,其实我对配置文件基本不记忆的,因为配置文件就是别人规定的配置,你写就好。比如要使用CSS就可以把上面这段代码输入到放入到里边的就好了。

注:修改配置文件需要重新启一下服务,重启服务可以让配置生效,这时候你到浏览器中可以发现CSS文件已经生效了,字变成了绿色。

按需加载Ant Design

加载 Ant Design 在我们打包的时候会把Ant Design的所有包都打包进来,这样就会产生性能问题,让项目加载变的非常慢。这肯定是不行的,现在的目的是只加载项目中用到的模块,这就需要我们用到一个babel-plugin-import 文件。

先来安装Ant Design库

npm install --save antd

安装和配置 babel-plugin-import插件

npm install --save babel-plugin-import

安装完成后,在项目根目录建立.babelrc文件,然后写入如下配置文件。


	//Next.js的总配置文件,相当于继承了它本身的所有配置
    "presets":["next/babel"],
    //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
    "plugins":[
        [
            "import",
            
                "libraryName":"antd",
                "style":"css"
            
        ]
    ]

这样配置好了以后,webpack就不会默认把整个Ant Design的包都进行打包到生产环境了,而是我们使用那个组件就打包那个组件,同样CSS也是按需打包的。

通过上面的配置,就可以愉快的在Next.js中使用Ant Desgin,让页面变的好看起来。

可以在 header.js 里,引入 <Button> 组件,并进行使用,代码如下。

import Myheader from '../components/myheader'
import Button from 'antd'
import '../styles/test.css'

function Header() 
    return (
        <>
            <Myheader />
            <div> willem </div>
            <div><Button>我是按钮</Button></div>
        </> 
    )

export default Header

这时候Ant Design已经起作用了,我们也完成了在Next.js中,使用Ant Design的目的。

以上是关于P10:如何使用Ant Design UI的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ant-design 组件中使用 css-in-js?

ant design pro advanced UI 测试

012-ant design pro advanced UI 测试

P03: Ant Design 企业级开发UI框架 - 介绍和环境初始化

后台管理系统UI风格规则--Ant Design “设计” 中的一些实用点

阿里Ant Design前端UI库的圣诞彩蛋,可把开发者给害惨了