最近准备帮一个朋友搞门户网站,之前自己学过点React以及蚂蚁的Ant Design框架。毕竟是门户网站,也不需要什么后端交互,也就是纯前端就行了,所以搞起来还好。用了框架就跟搭积木一样。
但是我实际搞起来之后发现,我连搭积木都懒得搭建,如果有不用写代码的方法就好了。终于,随眼一瞥,发现了antd官网底部相关资源有这么个首页模板集。
环境需求
需要node的环境,安装教程不过赘述,网上找。
我这里用的是windows下的安装,根据自己的环境找相应的安装方法。
模板编辑
这算是一个模板网站
https:
//landing.ant.design/index-cn
同时它也提供了编辑器,下面也提供了一些模板,我们直接进入编辑器
可以看到,即使你不会代码,直接通过拖拽的方式进行组件的编辑,参数化的对样式和内容进行修改,也可以得到一个满意的效果,这个使用就不过多赘述了。
将设计好的代码下载下来后,解压如下
Recat项目创建(可跳过)
官方给出了使用教程文档,建议参考creawte-react-app的这部分
https://landing.ant.design/docs/use/create-react-app-cn
这个还需要安装一堆依赖,修改一些代码等等,可以,但没必要自己搞。我这里不过多赘述,因为我要用更傻瓜的方法。
开箱即用的部署
官方是给出了一个示例git仓库的
https:
//github.com/ant-motion/landing-create-react-app-example.git
仓库中是已经配置好的react项目代码示例,我们现在下载下来,进入目录然后安装一下依赖,如果太慢大家可以使用cnpm,网上找方法,我就不过多赘述。
npm
install
我这里是已经装过了,然后我们先运行示例的代码
npm
start
可以看到,示例已经运行起来了,现在我们只需要将示例中的Home文件夹替换成我们刚刚自己编辑下载的Home文件夹
将src下的Home文件夹进行替换,重新运行
npm
start
完美替换,无需写一行代码,就创造出自己的门户网站。
Nginx 部署
最终,我准备使用Nginx将它部署起来,先在项目目录进行打包成静态资源文件,得到build
文件夹
npm
run build
后面,我将用虚拟机来安装nginx,做演示,安装nginx
apt
install nginx
然后把刚刚的build
文件夹移动到虚拟机上,最终我得到到了路径打包后的静态资源的路径 的/home/ssremex/home_demo
文件 。
编辑nginx.conf
vim
/etc/nginx/nginx.conf
server
{
listen
8088
;
# 更换成自己想监听的端口
server_name
0.0.0.0
;
root
/home/ssremex/home_demo;
# 更好你自己的路径
location
/ {
try_files
$uri
$uri
/ /index.html;
}
}
检查一下nginx配置
nginx
-t
没有问题,重启nginx服务
sudo
systemctl restart nginx
完美!
原文始发于微信公众号(飞羽技术工坊):0代码编写,快速构建门户网站(基于React Antd)
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论