码云 React.js教程 2020-12-16

P01：前端基础开发环境搭建

文章目录隐藏

用create-next-app快速创建项目
建立博客首页
让Next支持 CSS 文件
按需加载Ant Design

我们先完成博客的前端界面的制作，主要完成的功能就是用户的访问，文章列表和文章详情页面。因为 Blog 的前台需要 SEO 操作，所以我们一定会选用Next.js框架来辅助我们开发。然后减少 CSS 和各种组件的重复开发，使用阿里的Ant Desgin来作为 UI 交互库。废话不多说，开始搭建开发环境了。

用create-next-app快速创建项目

create-next-app就是Next.js的脚手架工具，有了它可以直接一句命令就建立好项目目录和基本结构，省去了我们很多的麻烦。如果你没有使用过create-next-app，可以先进行全局安装，安装命令如下：

npm install -g create-next-app

先创建一个总的目录，因为我们的项目会分为三个大模块，所以需要一个顶层目录。创建完成后，再进入目录。安装完成后，进入你要建立项目的位置，使用npx来进行安装。

npx create-next-app blog

按回车，就会自动给我们进行安装项目需要的依赖，Next 相关的命令也会添加好。完成后进入目录就可以使用npm run dev来测试一下。

在浏览器中输入http://localhost:3000/,看到下面的内容，说明项目生产成功。

基本的前台项目结构就建立好了。

建立博客首页

用create-next-app建立好后，主页是默认的，所以我们要删除一下默认的文件和代码。把 pages/index.js 首页改成下面的代码。

import React from 'react'
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>

    </div>
  )
}

这样基本的前台结构就算搭建完成了，但是我们还要使用Ant Desgin轮子来写我们的 UI 部分。

让Next支持 CSS 文件

先用npm命令来安装@zeit/next-css包，它的主要功能就是让Next.js可以加载CSS文件，有了这个包才可以进行配置。

npm install --save @zeit/next-css

或者 yarn 命令，根据自己情况定

yarn add @zeit/next-css

包下载完成后，在blog根目录下，新建一个next.config.js文件。这个就是Next.js的总配置文件。写入下面的代码:

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

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

module.exports = withCss({})

这样我们的Next.js就支持 CSS 文件了。

按需加载Ant Design

接下来用 npm 来安装antd，在命令行里输入：

npm install --save antd

然后再安装一下babel-plugin-import，命令如下：

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'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>
      <div><Button>我是按钮</Button></div>
    </div>
  )
}

如下图，如果能正常使用，我们的基本环境就已经建立完成了。