本文介绍了使用Vue框架构建一个简单的个人博客系统的过程，包括博客总览、添加、预览、编辑和删除功能。在实现过程中，遇到了Component“default”路由绑定错误、下拉列表显示问题及自定义指令v-color应用问题，并给出了相应的解决方案。通过这个小案例，展示了Vue的基础应用和组件化思想，适合初学者巩固Vue知识。
Vue框架
内容管理
Vue小案例 ---- 简单的个人博客【好看的样式可以再完善，主要是思路】
前面分享了vue3的大部分的知识，所以专门出一篇小小的文章实操一下；后面博主会基于vue + springBoot开发个人网站，届时会在github上开源
关于这个vue运用的小demo很easy； 主要实现的功能
- 添加博客 【添加博客能够实时预览效果】
- 博客总览【所有的文章，对content进行裁剪】
- 博客详情【文章的详情】
- 编辑和删除博客
这里为了不浪费时间，就简单弄了一下，页面也没有运用太多的CSS样式
这里的博客就是随机访问的一个可以返回json数据的网站:happy:; 因为这毕竟只是一个小demo，不值得再编写后端； 目的主要是使用vue【没有使用bootstrap和Element的样式】
博客demo展示
这里demo样式真的一般，这里唯一提示的就是实现博客的标题为五颜六色，可以通过随机数来实现【每次刷新都可以变色】
博客总览页面
这里就是点击进入项目的时候就会显示该页面，该页面会显示所有的博客，博客标题大写，并且内容为前100字，博客标题变色【随机】 这里的数据都是乱写的:happy:
添加博客页面
这里就是要能够内容编辑和博客内容同步显示【这里的文本域就是textarea，没有引入各种编辑工具】
这里实现很简单，就一个v-model，没有含量
博客预览
这里的设计因为没有数据，所以就简单使用的网站的文字
最低0.47元/天 解锁文章
扫一扫
6004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
