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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM