学两个月前端后做了个这样的网站

省流地址:sinan.fun

萌芽

事情是这样的,Laravel 框架对前端构建的支持越来越友好,很早就关注到官方文档中提及到了 Webpack、Vue、React、Vite 等相关技术结合框架的应用。而我一直都是在跟随着框架的升级,来更新自身的技术栈。所以,便有了学习下前端的想法。

不得不感叹现在前端技术的迭代速度,从 Webpack 到 Vite,Vue2 Options 到 Vue3 Composition,tailwind 到 unocss... 对于使只涉及jquery、layui等相关前端知识的后端震大惊,都已经卷到这种程度了吗?

在b站过了一遍 Vue 视频后,感觉对于各种招式胸有成竹。那不如,实践一下,从零实现一个技术社区?

开始

既然是自己当产品来设计,那就没什么讲究了,界面不丑,得用最新的技术栈,然后能跑起来就行。

分析自身平时关注内容的一些习惯:「找自身技术栈更新资讯」、「技术社区寻找问题思路」、「总结踩过的一些坑」、「收藏整理一些资源」...社区MVP版的想法,便是能够快速地聚合各渠道技术资讯,有更新时能够进行消息通知;能够整理相关的技术文档,类似于Dash;对于常用的网址能够进行简单地收纳整理。

开始最为头疼的是完全不懂设计,比如内容发布页希望能够发布帖子、rss源、收纳开源库文档、发布导航链,但我的设计图可能长这样

参考 Reddit,调整一下

界面设计是很头疼的部分,常在颜色、边距来回调,可能实现后改来改去又回到了初版,又或者是升级 UI 框架样式产生了差异... 会出现各种预期以外的问题,如果有懂设计的朋友可以多提些建议,thks!

效果图

  • 全局快捷工具栏,使用 commmad + kctrl+k或者 / 快捷键唤起

  • 首页

  • 首页-暗黑模式

  • 详情页

    • 详情页-暗黑模式
  • RSS 信息展示

  • RSS 信息展示-暗黑模式

  • 用户资料页

    • 用户资料页-暗黑模式 欢迎掘金朋友们前来观光👏
相关推荐
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD2 小时前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟2 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计