前言

前端一向被认为学习的东西多且杂,无可否认,是这样的

多样化的需求也导致了我们需要使用各种各样的工具,但奈何各种各样的工具也很繁多

所以便想着整理一些可能会用到的工具,方便大家使用

介绍

框架

客户端渲染

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:

React:
> Redux的配置较为复杂,上手难度较高,如若没有特殊需要建议使用zustand
- redux: https://www.redux.org.cn
- zustand: https://awesomedevin.github.io/zustand-vue
- jotia: https://jotai.jscn.org/docs/introduction