gitee实现个人存放网络资源图片集vue公测版

在这里插入图片描述


往期精彩文章:

1.前端如何通过vue/cli脚手架创建vue项目【vue工具】

2.如何使用csdn里的自定义模块管理专栏,看这一篇就够了。

3.前端最强优化,隐藏浏览器右侧滚动条

4.盘点,这些年你知道的鼠标移入显示小手图标的css的cursor 属性,你还记得吗?

5.前端引入阿里图标库的最便捷方式

💌 作者简介

  • 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【前端动态图解领域创作者】😜
  • 📜 CSDN主页:水香木鱼
  • 📑 个人博客【简历】:陈春波
  • 🎨 系列专栏:工欲善其事必先利其器
  • 🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝
  • 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。

哈喽小伙伴们,我们是否拥有自己的图床呢?有很多漂亮的自拍照,是否都存在手机里?从事IT行业,尤其是程序员,图床是日常生活中,必备存图神器

如果你是前端开发工作者,请看这里👇 当然,学到手的知识,归根到底都是我们自己的。

👉图床在线演示事例

在这里插入图片描述

文中如有不懂的地方,可以在下方留言,木鱼会在第一时间 给大家回复

注意:【这里的图床指的是个人所有、当作个人的相册集、blog 文章内的图片素材存储等,!!! 并非自动上传的图床】


1、图床介绍

图床就是专门用来存放图片,同时允许你把图片对外连接的网上空间【个人或者对外开放使用】

2、图床应用

  • 相册集
  • 个人博客【文章素材】
  • 存放个人生活照等

3、创建图床准备工作

  1. 创建vue项目
  2. 选用纯前端开发【vue2、Ant Design of Vue、本地图片数据.js】
  3. 免费开通Gitee Pages 服务

4、结合Vue的UI组件库,美化图床

  • element
  • Ant Design of Vue

5、案例【博主亲身体验】

由于项目属于脚手架创建,在这里就不进行详细分析了。请伙伴们 移步仓库 自行查看。一👇👇👇

可查看 👉图床源码下载地址 ,伙伴们拿去修改即可。

在这里插入图片描述
👆👆👆👆👆👆

如何使用csdn 自定义模块专栏 ?

请看如下: 往期精彩文章 👉如何使用csdn里的自定义模块管理专栏,看这一篇就够了。

6、Gitee Pages 服务部署【关键】

在这里插入图片描述

dist 结构

在这里插入图片描述
选择Gitee Pages 服务并进入

在这里插入图片描述

以下为已经部署的截图样例,没有开通Gitee Pages 服务 的伙伴,一定要开通,才会显示此界面。

  • 部署分类:master
  • 部署目录:dist 【因为vue项目,必须通过打包后才可以部署项目,dist 为打包后的压缩版】
  • 选择强制使用https 协议
  • 点击更新

在这里插入图片描述


📖 写在最后

感谢大家阅读到结尾,本次的文章就分享到这里,总结了图床的经典案例,让我们都拥有属于自己的图床,希望可以帮到大家,谢谢。

如果您觉得这篇文章有帮助到您的的话不妨关注+点赞+收藏+评论+转发 支持一下哟~~😛您的支持就是我更新的最大动力。

在这里插入图片描述

posted @ 2022-06-21 08:44  水香木鱼  阅读(60)  评论(0编辑  收藏  举报