P10：如何使用Ant Design UI

心已赠人 2023-10-06 21:02 8阅读 0赞

#### Next.js 教程 ####

*  阐述
 *  让Next.js支持CSS文件
 *  开始进行配置，让Next.js支持CSS文件
 *  按需加载Ant Design

## 阐述 ##

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

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

## 让Next.js支持CSS文件 ##

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

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

body{
        
        color:green;
    }

然后用 `import` 在`header.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文件已经生效了，字变成了绿色。

![在这里插入图片描述][fb1a21f83b334dc9ac1ff1ec7b69503b.png]

## 按需加载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的目的。

[fb1a21f83b334dc9ac1ff1ec7b69503b.png]: https://img-blog.csdnimg.cn/fb1a21f83b334dc9ac1ff1ec7b69503b.png