Next.js搭建前端环境

（1）create-next-app就是Next.js的脚手架工具，

　　有了它可以直接一句命令就建立好项目目录和基本结构，省去了我们很多的麻烦。

       如果你没有使用过create-next-app,可以先进行全局安装，安装如下：

npm install -g create-next-app

（2）安装好脚手架create-next-app后，创建我们的项目：

create-next-app 文件名

（3）脚手架会给我们创建好项目目录和基本结构，npm run dev启动项目。看到如下图，启动成功。

 

（4）使Next支持CSS文件

npm install --save @zeit/next-css

安装好以后，在文件根目录下，新建一个next.config.js文件

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

（5）按需加载Ant Design

npm install --save 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'  // 按需引入了button按钮
const Home = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Button>按钮</Button>
  </div>
)

export default Home

 

posted @ 2019-11-29 15:38  林玖女神  阅读(2263)  评论(0)  编辑  收藏  举报