码云 P01：前端基础开发环境搭建
我们先完成博客的前端界面的制作，主要完成的功能就是用户的访问，文章列表和文章详情页面。因为 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>
)
}
如下图，如果能正常使用，我们的基本环境就已经建立完成了。
以上关于P01：前端基础开发环境搭建的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P01：前端基础开发环境搭建
