我给自己搭建的前端导航网站，你们都别用🤪

💥 想法来源

前段时间在工作的时候，因为遇到了一些之前没了解过的知识，所以化身百度cv工程师，上网冲浪寻找灵感（找源码copy🐶）。但是网上有好多重复或者低质量的文章，严重影响了我的cv效率。

此时，一些埋藏了两年半的想法涌上心头🧐：

场景1： 平时在工作中要用到新知识的时候，需要上网找教程文档，但是看官方文档又比较费时间，常常是先找个网文教程跟着做，出了bug才会看官方文档寻找原因。

那么问题来了，一般我们寻找到优质的教程网文后，常常会收藏起来以后备用，但是以后真的会用吗？😅现实是很多情况下，因为收藏的文章太多，以后再用到这个技术时，常常会懒得去翻收藏夹找对应的文章，而是重新去百度搜索💩（优质网文：家人们谁懂啊，遇到个下头男，收藏了我却从来没宠幸过我🤡）

场景2： 对于一些类似于vite，typescript，eslint，.prettier等这种需要配置一些配置项的工具，应该很少有人会背他们有哪些配置项吧🤭（我是个low low的前端崽😭反正我是从来没记忆过），配置项这东西是：想配置一个规则时，又不知道叫啥，搜索都无从下手，看官方API 文档又太费时间，又或者随便照抄别人都配置，却不知道每个配置项的作用，导致存在一些隐患。

那么问题来了，为什么官方的 API [ 更全面、更准确 ]，我却不愿意看呢，因为[ 太分散，太深入 ]。现实是工作中需要配置这些规则时，常常也是百度搜索对应的配置详解，因为他们[ 更直观，更方便 ]。如下图，还是挺多人这么搜的😀

先来说明一下导航网站是做什么的：在导航网站上，你可以轻松发现非常多实用、或具有创意的资源，不用再去靠自己的实践积累这些资源。导航网站的资源常常有：实用的开发工具、优质的网站、优质的文章、各种框架的官网入口、优质的技术博客等。

场景3： 我之前也收藏了几个好用的导航网站，确实很好用🤓但是对于我来说，也发现很多不方便的地方。

• 比如大部分导航网站面向的用户群体都是程序员，而不是前端程序员，这样的网站上对于我们前端来说就会有很多“无用”的资源（当然肯定也有导航网站是面向前端的，只不过我没接触到🥺）；
• 又比如很多导航网站逐步迭代了很多功能，已经不单单是一个导航网站，体量太大，用起来感觉不清爽；
• 再比如很多导航网站把所有资源都放在同一个页面，只是用菜单项区分开，我感觉也是有点混乱，技术类的，文档类的，休闲放松类的我觉得分开比较合适🧐

总结： 既然这样，那我就利用这个周末自己搭建个网站，提炼一些好的资源放上去，方便自己以后查阅 😀

💪 开整

闲言碎语不要讲，直接进入正题，我打算将我的导航网站分为五个模块： 工具、文档、游戏、摸鱼、案例

下面一个一个来介绍：

【工具】

工具菜单是收录一些实用、可以提高开发效率的工具。目前分为以下几种（我按可能用到的频率来排序）：

• 常用工具：一些零散不好归类的，实用的工具；
• 图片处理：提供图片压缩，图片裁剪，生成精灵图，在线ps等处理图片等工具；
• css工具：在写样式的时候，一些精致的样式调试起来太费劲，这里提供一些工具在线调试css，比如在线生成网格布局等；
• UI灵感：没有设计，自己空想样式真的好难🤧
• 图标：一些免费的图标字体库；
• chrome插件：好用的chrome插件，谁用谁知道～
• vscode插件：前端必备vscode插件

【文档】

文档菜单主打的就是简洁（我寻思都来查文档了，应该知道这个东西是干什么的，没必要写那些繁琐的描述）。

除了没有描述之外，它与其他导航网站不同的特点是，每个库都提供了官方文档和相关文档两种（相关文档也就是网文教程），提供更多的查阅渠道，完美解决了上文情况1，2中的问题，奶丝🥳。

ps： 因为刚搭建好网站，大部分文档目前都是只提供了官方文档的入口😂，以后会陆续将以前收藏的网文链接或者精选一些好文挂上去～

【游戏】

游戏菜单不过多介绍，把游戏单独拆出来，不要影响我们查找有用的工具👻

【摸鱼】

摸鱼菜单收录了一些有趣的，有创意的网站，以后会陆续收录一些免费视频、音乐、或其他资源的网站。

【样例】

样例菜单目前还没开发，准备留着以后放置一些自己写的小demo，又或者是一些例如three.js的3d案例等。

🍎 成果

先贴上网站地址： 前端助手传送门

目前网站刚刚搭建，很多东西都不完善，但是也能将就用了，以后慢慢维护，如果大家有什么好的网站或文章可以在评论区告诉我或者在gitee上提issues 😘😘😘（ps: 本网站是部署在gitee pages上的，代码开源）