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:前端基础开发环境搭建