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快速创建项目

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

建立博客首页

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>
  )
}

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

前端基础开发环境搭建

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P01:前端基础开发环境搭建

发表评论

提供最优质的资源集合

立即查看 了解详情