P10:Next.js教程-如何使用Ant Design UI
如何在 Next.js 框架下使用 Ant Design,是我们每个前端人必会的,所以决定单独整理一篇笔记来讲一下,希望对你有帮助。
Ant Design 是一款阿里开源的前端组件库,我在工作中也一直在使用,我觉的它是目前阿里开源的前端项目是最成功的,使用人数也是最多的一个。不过它的初心是用来搭建项目的中后台系统,比如后台的管理系统。从 React 的角度来讲,它就是一个组件库,里边封装了开发中最常用的一些组件,让我们可以通过简单的配置就可以使用他们。
让 Next.js 支持 CSS 文件
在前面的笔记中我讲过Next.js
默认是不支持 CSS 文件的,它用的是style jsx
,也就是说它是不支持直接用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 文件已经生效了,字变成了绿色。
按需加载Ant Design
加载Ant Design
在我们打包的时候会把Ant Design
的所有包都打包进来,这样就会产生性能问题,让项目加载变的非常慢。这肯定是不行的,现在的目的是只加载项目中用到的模块,这就需要我们用到一个babel-plugin-import
文件。
** 先来安装Ant Design
库 **
直接使用 npm 来安装就可以。
npm install --save antd
** 安装和配置babel-plugin-import
插件 **
先进行安装babel-plugin-import
。
npm install --save babel-plugin-import
安装完成后,在项目根目录建立.babelrc
文件,然后写入如下配置文件。
{ "presets":["next/babel"], //Next.js 的总配置文件,相当于继承了它本身的所有配置 "plugins":[ //增加新的插件,这个插件就是让 antd 可以按需引入,包括 CSS [ "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> mybj123.com </div> <div><Button>我是按钮</Button></div> </> ) } export default Header
然后到浏览器中查看一下结果,
这时候Ant Design
已经起作用了,我们也完成了在Next.js
中,使用Ant Design
的目的。
码云笔记 » P10:Next.js教程-如何使用Ant Design UI