Vue3重构博客前台!去除UI库!自己编写所需UI组件!

前言

通过将进一个月的时间!已经把博客使用Vue 3重构!完成了博客的重构及导航栏、全局提示、通知提醒框、空状态、无限滚动、按钮、头像、回到顶部、评论、音乐播放器、分页器、滑动条、Markdown预览、图片。其中图片样式来自Element,音乐播放器样式来自APlayer.其余的组件样式来自Ant Design of Vue。
也因为如此!本次前台打包后大小从1.3M降到0.9M左右。去除了注册,登录,用户信息功能!采用第三方登录!采用更简洁的设计!统一的设计风格
本次重构分为两个部分
一:编写博客前台所需的功能组件
二:重新设计博客前台及功能
网站首页:停止服务
Vue3前端源码:https://gitee.com/baymaxsjj/by-vue3-blog
Vue3UI组件源码:https://gitee.com/baymaxsjj/by-vue3-ui
Vue2前端源码:https://gitee.com/baymaxsjj/by-vue-blog

重构演示

总结

通过这一个月的重构!也对Vue 3有了初步的了解!本次的重构中由于去除了Element 所以大部分时间花费在编写组件上!在重构上也就花费了一个星期左右!去除了部分功能!主要因为我感觉博客应该回归到博客本身!没事写写文章!至于登录啥功能没啥用!也有风险!所以采用第三方登录的方式!对于这次博客其实学到了很多的知识!本来也想写几篇编写组件总结性文章!奈何天气太冷冻手!所以直接上了这篇文章!对于接下来的学习现在要回归到我的学习中,接下来会学习C语言和高数吧!Vue也就空空在摸摸吧!我也知道代码这玩意要经常写!要不然会忘!但是现阶段要做我该做的事!毕竟也玩成了博客重构,好多事也放下了!接下来回归书本学习啦!!!!!博客源码想看的自己看吧!我就不写了!毕竟编程就是一个自主学习的过程,任何事也一样!只有自己去琢磨才能懂!加油了屏幕前面的你!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 目前比较流行的Vue 3 UI框架有以下几种: 1. Element Plus:是基于Element UI进行的Vue 3版本重构,是一款成熟的企业级UI组件,具有丰富的组件和良好的设计风格。 2. Ant Design Vue:是由Ant Design团队开发的Vue版本的UI框架,同样具有丰富的组件和良好的设计风格。 3. Vant:是一款移动端的UI组件,适用于快速构建高质量的移动应用,具有轻量、易用、可定制的特点。 4. Naive UI:是一款新兴的Vue 3 UI框架,致力于提供简洁、易用、高效的UI组件,支持按加载和主题定制。 5. PrimeVue:是一款基于Vue 3的UI组件,提供丰富的组件和样式风格,适用于多种场景的开发求。 以上是目前比较流行的Vue 3 UI框架,根据具体的项目求和设计风格选择适合自己的框架。 ### 回答2: Vue3是一种流行的JavaScript框架,可用于构建用户界面。在Vue3中,有许多优秀的UI框架可供选择,以下是其中一些例子: 1. Element Plus:Element Plus是一种基于Vue3的组件,提供了丰富的UI组件和功能,包括按钮、表格、表单等等。它具有简洁、易用的特点,适用于各种类型的项目。 2. Ant Design Vue:Ant Design Vue是由Ant Design团队开发的一套React UI组件Vue版本。它提供了许多高质量的UI组件和布局,以及丰富的主题和样式选项,可用于创建现代化的Web应用。 3. Vant:Vant是一种轻量级的移动端UI组件,特别适用于Vue3项目。它包含了众多常用的移动端UI组件,如按钮、弹窗、导航等等。Vant具有快速、灵活和易用的特点,可以帮助开发者轻松构建出色的移动应用。 4. PrimeVue:PrimeVue是一种用于Vue3的开源UI组件,提供了各种功能强大的组件,如表格、图表、表单等等。它具有丰富的项目支持和活跃的开发社区,可以满足各种复杂的UI求。 总之,以上只是一些Vue3的UI框架的例子,当然还有其他许多优秀的UI框架可供选择。根据具体项目求和个人偏好,开发者可以选择适合自己的UI框架来构建出美观、高效的用户界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值