Fr Cover Banner V2.0开源下载 一款插画资源下载网站

谢谢你没有找我,所以我找到你了

Fr Cover Banner V2.0开源下载 一款插画资源下载网站

介绍

Fr Cover 它是提供了枫瑞博客网软文发布的Banner图片下载,1.0版本使用Bootstrap 5写的。纯粹的Html Css上手简单,最好的是兼容电脑/平板/手机等多种尺寸,1.0下载可以前往《免版权,免商用插画Banner封面图片下载

2.0版本使用Vue 2.0 + Element UI写的,上手难度大大增加。而2.0版本是学习Pc Vue端框架第一个学习项目,加上不会vue更是头疼

感谢

夏天,codecczen,焦文松

预览图

Fr Cover Banner V2.0开源下载 一款插画资源下载网站
Fr Cover Banner V2.0开源下载 一款插画资源下载网站

完整安装

因为枫瑞也是新手,若有vue和前端基础建议使用完整安装

1.安装node:Node.js (nodejs.org)

2.安装全局vue-cli

克隆码云项目

https://gitee.com/fengruiblog/banner-v2.0

将源码倒入Hbulder/VS Code等工具,执行

vue ui
Fr Cover Banner V2.0开源下载 一款插画资源下载网站

在打开的地址中任务一栏即可以编译和运行项目

Fr Cover Banner V2.0开源下载 一款插画资源下载网站

源码中src/components/api.js中会请求3个json文件,网页的数据全部来自于他们,若打包发行在api.js中修改相对应域名即可,若在运行模式下可以使用淘宝的rap2 ap模拟工具测试,不如运行模式下会有跨域问题

Fr Cover Banner V2.0开源下载 一款插画资源下载网站

打包之后将源码中src/assets/frDataJson中会有有4个json文件夹,,若您将该文件复制到项目根目录,就是和api.js文件夹里面的路径相对应

打包安装

提供编译好的源码,拖入到编辑器(Hbulder/VS Code)中多文件查询api.里面的域名搜索替换即可

Fr Cover Banner V2.0开源下载 一款插画资源下载网站

如何更新

因为我们json数据和页面是分开的,这样我们后期更不会有太大的冲突

完整安装:下拉克隆的项目,重新编译即可

打包安装:下载编译好了源码,直接上传服务器替换即可

若有更新json文件,则需要手动更新json文件,之后在执行页面源码替换

踩坑

打包编译好的源码是无法直接使用的,需要放到服务器上,或者本地webSever运行

视频教程

https://www.bilibili.com/video/BV1S3411475D/

插画网

https://banner.frbkw.com/

编译好的文件下载

在公众号中回复“frcover”即可下载

Fr Cover Banner V2.0开源下载 一款插画资源下载网站 1
(11)
枫瑞博客枫瑞博客
上一篇 2021-12-01 12:45
下一篇 2021-12-09 12:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

评论列表(9条)

  • 浸风尘
    浸风尘 2022-01-15 16:09

    联系视频可以像网页那样播放

  • 支持星宿小程序
    支持星宿小程序 2021-12-15 21:05

    请问星宿小程序还会开发更新吗?翻白眼

  • 晴栀sunset
    晴栀sunset 2021-12-13 21:10

    写的好好,评论怎么没用啊

    • 枫瑞博客
      枫瑞博客 2021-12-14 18:14

      @晴栀sunset星宿UI文档手册 中的wordpress下评论 有说明如何处理

  • 智慧人生
    智慧人生 2021-12-13 03:13

    你好 老师 我用的是星宿ui1.5 封面图和轮播图显示不全,怎么设置?

    • 枫瑞博客
      枫瑞博客 2021-12-13 17:41

      @智慧人生查看下是否给裁剪,可以阅读星宿UI文档中常见问题下的图标模糊处理方式

  • 自媒体运营
    自媒体运营 2021-12-09 11:44

    不错,必须顶一下!