项目前端基础开发环境搭建
使用create-next-app 快速创建项目
create-next-app 就是 Next.js 的脚手架工具 ，使用它就可以创建出一系列基本结构
- 全局安装
npm install -g create-next-app
- 使用npx来创建项目的位置
npx create-next-app xxx
- 使用 yarn dev 运行测试一下
相关配置
-
让 Next 支持 CSS 文件
使用 yarn 安装 @zeit/next-css 包，让 Next 可以加载 CSS 文件，
yarn add @zeit/next-css
在项目目录下 ，新建一个 next.config.js 文件。
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
-
按需加载 Ant Design
使用 yarn 安装 antd
yarn add antd
安装 babel-plugin-import
yarn add babel-plugin-import
安装完成后，在项目根目录下创建一个 .babelrc 文件。
{
"presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置
"plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
[
"import",
{
"libraryName":"antd"
}
]
]
}
在pages目录下，新建一个_app.js文件，将CSS进行全局导入
import App from 'next/app'
import 'antd/dist/antd.css'
export default App
这样 Ant Design 就可以按需引入了， 在 index.js 加入一个按钮。
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
网友评论