从零开始搭建一个基于React框架的博客发布系统 (一)初始化环境
了解博客搭建流程
欢迎稍后收看我的下一篇文章,node操作文件脚本编写。
现在的博客搭建一般都是使用Github作为载体,无论我们经过什么配置,做的事情只有一个,那就是把编译好的系统部署到github上去,比如Hexo,只不过一些复杂的操作他都帮你省了,你只需要上传自己的博客内容就万事大吉了。
github作为一个承载容器,你自己新建一个io后缀的项目之后(一个账号只可以有一个此项目),每次把编译过的代码push到github上去之后,github会自动的帮你部署,等你再次访问该地址,得到的就是你的博客项目了。
声明一下,这个系统的想法以及实现的绝大部分都来源于我的同事,sxq,我不生产代码,我只是代码的搬运工。
本次文章重点不是博客搭建的流程,而是通过这个项目来学习前端的一些技术:
- 利用create-react-app跑通项目
- webpack的配置详解
- nodejs的文件操作以及命令行操作
- 一些React本身的知识,比如生命周期,组件书写,路由等
- 数据管理中心,mobx/redux的使用
- 一些babel的配置与使用
初始化create-react-app
首先需要安装一下node
环境,node本身带有npm
工具,所以安装好node之后就可以是用npm
命令了。个人习惯原因,我更喜欢是用yarn
,这是个和npm一样的包管理工具,可以直接npm通过命令来安装yarn。
安装命令如下npm install -g yarn
,-g标识全局安装,这样就可以在任何一个路径下面使用了。
好了,node和yarn就是前期要准备的安装环境了。
第一步,全局安装create-react-app
任何一个路径键入yarn global add create-react-app
第二步,创建本地的create-react-app
接下来,在一个你希望存储代码的文件夹下输入如下命令,他会自动帮你创建好程序。
create-react-app blog
,然后在当前路径进入到,创建的文件夹,cd blog
第三步,初始化开发环境
首先安装依赖包,yanr install
,然后create-react-app默认是把配置项给隐藏掉的,所以还要键入如下命令。yarn run eject
然后他会问你yes or no,你输入y就好了。声明一下,这是个单项操作,eject之后就回不去了。
现在看一下开发的目录:
大致的说一下:src
里面就是我们的前端代码,package.json
中是依赖包的引入文件,install命令就是通过读取依赖来下载依赖包。node_modules
是下载的依赖包的存放地址,public
中存放一些公共的文件,scripts
中存放的是运行的脚本,我们执行yarn start
的时候,实际上执行的就是start.js
的脚本内容。
欢迎收看我的下一篇文章,node操作文件脚本编写。
以上是 从零开始搭建一个基于React框架的博客发布系统 (一)初始化环境 的全部内容, 来源链接: utcz.com/z/382478.html