Vue开发之旅——我的博客搭建记录(三)
发布于 3 年前 作者 yzou 2326 次浏览 来自 分享
  • 博客3.0,大改特改!(11.10-11.13)

  • 卡片(暂时这么叫,名字没想好)

    网站的初衷是博客+二次元资料库,因此复制一遍发博客的代码,稍加修改(将数据存储至新的数据库)就是发卡片页了。建的第一个资料库就是阿手(b站搜索贝拉kira,把你的关注给我交了)。展示方面和博客展示一样的思路,图片使用懒加载处理,但使用了网络上的卡片插件(https://www.17sucai.com/pins/38899.html),将鼠标放至卡片上可以有一个上推的阴影效果,非常好看。为适配图片尺寸,将卡片设为横向矩形。ASOUL时代,沸腾期待!(点击查看更多可直达bb空间捏)

  • 嵌套路由:千鸟,降临!

    做完阿手下一个就是千鸟了。想着在卡片页面的左侧做一个导航栏,能够切换阿手/千鸟/其他。导航栏使用竖向的el-menu,根路由是__/card__,点击千鸟路径就变为__/card/qianniao__。这需要引入嵌套路由,直接上图,在route.js文件中为card设置__children__属性。

el-menu开启router,为每个item设置路径,就可实现导航路由功能咯。
千鸟的立绘是竖向的,因此调整了卡片尺寸。__鸟不灭!鸟不灭!__
  • 评论区?发病墙!

    设置了一个匿名评论区,发现发布评论后得手动刷新才能更新出来。在App.vue中写了一个__reload__函数,通过provide提供变量,子组件通过inject注入变量,设置0.5秒时延触发页面自刷新。

  • 史诗级提升:本地上传!(11.15)

    结合文档和博客研究出了使用elmentui+leancloud将本地文件转为base64上传。__el-upload__的手动上传需要自己写__httpRequest__函数,本地上传的关键就是写好这个函数。

下一章介绍部署网页至服务器上,折磨了一晚上,这方面文章繁多,都是你复制我的我复制你的,而且是vue-cli3+vue2,不适配我的版本,好在最后找到了__神中神__文章解决了。中间摸了几天画画去了~(天选管人痴收到了海子姐晚安和白白回复,赢!赢!)

5 回复

期待后续!我之前将本地vue部署到我的阿里云服务器上也弄了半天才总算搞定

文件上传功能无疑是博客的一大亮点,期待你的博客越做越好。加油!!

瑞瑞的,小摆一天

学习了,加油

回到顶部