React搭建一个人博客

最新推荐文章于 2024-07-24 11:09:48 发布

前端小东

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量505

点赞数

分类专栏：前端文章标签： react.js

本文链接：https://blog.csdn.net/sinat_39415600/article/details/120440159

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

今天我们就用我们所学的知识，搭建一个个人的简易博客，当然前提是你必须得会react的基本知识咯，话不多说，开始搭建
准备工作
1：用create-next-app 框架作为快速脚手架搭建
2：使用阿里的Antd作为我们的ui库

1：安装脚手架

//全局安装create-next-app
cnpm  install  create-next-app  -g  
//初始化一个项目
 npx create-next-app   blog

2：让next支持css

cnpm  install  @zeit/next-css --save

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

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

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

module.exports = withCss({})

3:安装antd和按需加载

cnpm  install  antd  --save
cnpm  install babel-plugin-import  --save

4:安装完成后，在项目根目录建立.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

修改pages下面的index.js，测试代码

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'

const Home = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
	Test
	<Button>我是测试按钮</Button>
    </div>
)
export default Home

启动项目，大功告成

前端小东

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React搭建一个人博客

今天我们就用我们所学的知识，搭建一个个人的简易博客，当然前提是你必须得会react的基本知识咯，话不多说，开始搭建准备工作1：用create-next-app 框架作为快速脚手架搭建2：使用阿里的Antd作为我们的ui库1：安装脚手架//全局安装create-next-appcnpm install create-next-app -g //初始化一个项目 npx create-next-app blog2：让next支持csscnpm install @zeit/ne
复制链接

扫一扫

专栏目录