吉尔伽美什的宝藏
前言
前端一向被认为学习的东西多且杂,无可否认,是这样的
多样化的需求也导致了我们需要使用各种各样的工具,但奈何各种各样的工具也很繁多
所以便想着整理一些可能会用到的工具,方便大家使用
介绍
框架
客户端渲染
Vue 框架:https://vuejs.org/
Vue.js 是一个用于构建用户界面的渐进式框架。它被设计为可以自底向上逐层应用,
从简单的单个组件到完整的应用架构都可以胜任。Vue 的核心库只关注视
图层,易于上手,同时也非常灵活,可以轻松地与现有的项目整合或逐步采用
React 框架:https://reactjs.org/
React 是一个用于构建用户界面的 JavaScript 库,最初由 Facebook 开发并在 2013 年开源。
React 的设计哲学强调可复用的组件和数据流的单向性,这使得构建和维护大型应用变得更加简单和高效
服务端渲染
Next.js:https://nextjs.org/
Next.js 是一个用于构建现代化 React 应用的框架,由 Vercel 开发并维护。
它最初被设计为简化服务器端渲染(Server-Side Rendering,简称 SSR)的过程,
但随着时间的发展,Next.js 已经演进成为一个全面且功能丰富的框架,适用于构建各种类型的 web 应用。
Nuxt.js:https://nuxtjs.org/
Nuxt.js 是一个基于 Vue.js 的通用(universal)应用程序框架,
由 Sébastien Chopin 和团队创建。它旨在简化使用 Vue.js 构建服务端渲染(SSR)和渐进式 Web 应用程序(PWA)的过程。
Nuxt.js 提供了一种约定优于配置的方法来组织项目结构,使得开发者能够快速搭建和维护复杂的前端项目。
博客框架
Hexo:https://hexo.io/zh-cn/
Hexo 是一个快速、简洁且高效的博客框架,基于 Node.js 编写。
它允许你使用 Markdown 或其他文本处理器编写文章,然后将其转换成静态网页,
便于部署到各种静态网站托管服务上,如 GitHub Pages、Netlify、Vercel 等。
Hugo:https://gohugo.io/
Hugo 是一个非常流行的开源静态网站生成器,它使用 Go 语言编写,因此在性能上表现得极为迅速。
Hugo 可以将文本文件(如 Markdown 或 AsciiDoc)转换为 HTML,从而构建出静态网站或博客。
它适用于各种类型的项目,从简单的个人博客到复杂的企业网站。
静态站点生成器
VitepressVitePress
VitePress 是一个基于 Vue.js 的轻量级静态网站生成器,专为开发文档网站而设计。
它由 Vite 团队维护,利用了 Vite 的快速热模块替换 (HMR) 和按需编译功能,使得文档的开发和预览变得极其快速。
前端路由(建议使用文件式路由或者 app 路由)
Vue Router:https://router.vuejs.org/
Vue Router 是 Vue.js 官方的路由管理器,主要用于构建单页面应用(SPA)。
它允许你将 URL 路径映射到应用内的组件,并处理视图的加载和切换,同时确保 URL 和应用状态之间的一致性。
React Router:https://reactrouter.com/
React Router 是 React 应用中最流行的路由库,用于构建单页应用(SPA),
它使你能够定义和管理应用中的不同页面或视图,同时保持整个应用只加载一次。
React Router 提供了多种方式来处理浏览器历史记录和动态渲染组件
generouted:https://github.com/oedotme/generouted
工具
UI
Ant Design:https://ant.design/
Element UI:https://element.eleme.io/
Vuetify:https://vuetifyjs.com/zh-Hans/
Arco: https://arco.design/
Material-UI:https://material-ui.com/zh/
Mantine: https://mantine.dev/
Radix-UI: https://www.radix-ui.com/
lemonsqueezy:https://www.lemonsqueezy.com/wedges
图标
Font Awesome:https://fontawesome.com/
Iconfont:https://www.iconfont.cn/
Lucide: https://lucide.dev/icons/
Anime.js:https://animejs.com/
动效
Motion:https://www.framer.com/motion/
react-spring:https://www.react-spring.dev/
Animate:https://animate.style/
加载动画(实时)
swup:https://swup.js.org/
pace: https://codebyzach.github.io/pace/
图片
PicGo:https://github.com/Molunerfinn/PicGo
iPic:https://apps.apple.com/cn/app/id1447235935
评论系统
Disqus:https://disqus.com/
Valine:https://valine.js.org/
性能优化
pjax:https://github.com/MoOx/pjax
状态管理
Vue: