搭建next前台开发环境并引入antd
2022-04-14 本文已影响0人
zZ_d205
参考网址：
https://blog.csdn.net/sinat_41696687/article/details/120253217
https://jspang.com/detailed?id=52
1：搭建next开发环境
npx create-next-app blog
2：进入blog目录
cd blog
3：使用yarn测试
yarn dev
如果能够进入到下面的界面，说明前三步已经成功了！
image.png
4：加载antd
yarn add antd
5：在pages目录下_app.js文件，写入下列内容
import '../styles/globals.css'
import 'antd/dist/antd.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
6：在index.js中引入Button组件
import Head from 'next/head'
import {Button} from 'antd'
export default function Home() {
return (
<>
<Head>
<title>Home</title>
</Head>
<div> <Button type="primary">Primary Button</Button></div>
</>
)
}
7：测试实现效果
出现下面的效果，表示前台环境搭建成功！
image.png
