博客2.0，堂堂更新（11.10）引入markdown 接上回，博客内容写在textarea里没有排版，也不能塞代码，限制过多。便引入了vue的markdown插件——v-md-editor，支持markdown的实时渲染，内容丰富度大大地提高了。 [图片] [图片] 博客详情 之前实现的[博客]页仅仅展示了博客标题与博客摘要，需要实现点击卡片进入单个博客内部，展示完整内容。这时便需要在路由中设置如下内容： [图片] 在点击博客标题时，通过router-link :to="'/blog/+blog.id"将blog id传至单独页，单独页中使用this.$route.params.id来接收，再通过leancloud接口实现过滤。 [图片] router vue的路由默认使用的是hash模式，这样会在地址中出现一个#号，看起来听扎眼的。使用history模式可以去除这一#号，vue3中通过createWebHistory()使用history模式。App.vue是挂载网页的根节点，在这个文件中设置router-view实现路由切换，也可设置整个网页的头图与底部图。 [图片] 界面美观 借鉴了许多博客设计，最后采取Fblog的界面设计（https://gitee.com/fengziy/Fblog#http://www.fengziy.cn/fBlog/），博客封面通过写博客时增加输入网络图片地址实现（暂时没实现本地图片上传）。 [图片] 在拉取数据时，发现图片怎么都加载不出来，检查代码，才想起图片赋值是动态的，不应该使用img src，而是使用img :src，实现动态数据绑定。一次加载过多图片会减慢速度，在此改用图片懒加载v-lazy，未访问的数据暂时先不加载。使用v-lazy也很方便，将img标签改成v-lazy就可以，同时在main.js文件中设置懒加载未加载时的图片。 [图片] （古见同学真可爱，嘿嘿） [图片]

博客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，不适配我的版本，好在最后找到了神中神文章解决了。中间摸了几天画画去了~（天选管人痴收到了海子姐晚安和白白回复，赢！赢！） [图片] [图片] [图片]

写在最前面 生日那天，下定决心学习游戏运营，未来做个运营人。秋招冲了一波游戏运营，有几家走到了终面，没想到寄了，无所适从只好准备春招以及毕设。大二时学过web2.0开发，对前端还算有一点点点接触，索性就沉下心学习一波前端。说到前端，就想着边学边做，做出点作品来，一是能熟悉具体知识的实操，二是给自己春招准备点作品，三也是算学习计算机这么久来，为自己做一个个人博客，能够记录生活学习的点滴，顺带整点小活。 网课时代（大概11.8之前） 关于Vue的学习，前期主要是通过网课学习。b站搜索技术胖（永远的神！https://jspang.com），跟着看完了vue3.0从零开始，也看了几个博客开发的教学视频，前期准备大概是完成了。 [图片] 博客初代（11.8-11.9） 首先需要配置vue3的环境以及脚手架vue-cli4，网上教程很多，对着敲一下很快就可以搭建一个项目目录出来。跟着视频（https://www.bilibili.com/video/BV1T4411W76J?p=1）敲了一版最基础的博客界面，视频中开发用的是vue2.x，而最新版vue已经是3.x，一些语法和函数已经做了更新，对敲的过程中需要搜索一下3的替代语法，还算是比较容易的。博客初代是一个前后端分离的项目，前端采用vue3+elementui，后端暂时使用的是leancloud（也许之后学学后端可以自己搭一个），但是leancloud还是非常好用的，数据可视化非常直观，调用接口仔细阅读文档就能掌握），设置了一个vue-router切换[博客] [写博客]两个界面，写博客包含博客标题、博客摘要、博客分类几个部分，点击发布将数据传至leancloud。博客展示页使用了elementui的card，但还不是本当上手，做的比较粗糙，暂时仅测试是否能从后端获取到数据，图片小汉堡是elementui默认的hh。初代大概做成这样就下班咯~ [图片] [图片] 后记 文章是博客开发一段时间后写的，大多数内容靠回忆以及之前的截图，具体代码由于增加了新的功能就没贴了~