搭建next前台开发环境并按需引入antd-一一网

参考文档：jspang.com/detailed?id…

1：搭建next开发环境

npx create-next-app blog
复制代码

2：进入blog目录

cd blog
复制代码

3：使用yarn测试

yarn dev
复制代码

如果能够进入到下面的界面，说明前三步已经成功了！

4：让next支持CSS文件

yarn add @zeit/next-css
复制代码

5：按需加载antd

yarn add antd 
yarn add babel-plugin-import
复制代码

6：在pages目录下建立_app.js文件，并写入下列内容

import App from 'next/app'

import 'antd/dist/antd.css'

export default App
复制代码

7：引入Button组件

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
)

export default Home
复制代码

8：测试实现效果

出现下面的效果，表示前台环境搭建成功！

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Symantec Norton Personal Firewall 2002 安全漏洞

GnuPG内置签名验证漏洞

React生命周期和类组件复习

「多图」图解10大CNN架构

Sympa 未明缓冲区溢出漏洞

图数据库到底是个啥

搭建next前台开发环境并按需引入antd

1：搭建next开发环境

2：进入blog目录

3：使用yarn测试

4：让next支持CSS文件

5：按需加载antd

6：在pages目录下建立_app.js文件，并写入下列内容

7：引入Button组件

8：测试实现效果