【前端】框架-构建-包管理-语言-语法-生态工具

前端框架

React

• 由 Facebook 开发的前端 UI 库，专注于视图层构建。
• 核心特性：JSX、Hooks、Context API，使用虚拟 DOM 提升性能和响应速度。

Angular

• 由 Google 开发的全功能前端框架，适合大型企业级应用。
• 基于 TypeScript，支持双向数据绑定和依赖注入。

Vue.js

• 渐进式 JavaScript 框架，专注用户界面开发，灵活易用。
• 以简洁语法和强大生态系统（Vue Router、Pinia 等）闻名。

Svelte

• 编译型框架，将组件在构建时转换为原生 JavaScript，免去运行时开销。
• 轻量高效，适合性能优化需求高的项目。

Preact

• 体积小巧的 React 替代方案，兼容大部分 React API。
• 适用于对包大小敏感的应用。

构建工具

Node.js

• 基于 Chrome V8 引擎的 JavaScript 运行环境，用于开发服务器端和工具链。

Webpack

• 强大的模块打包工具，适用于大型项目，支持模块化和代码分割。

Vite

• 专注于开发速度的新一代构建工具，适合 Vue 3 和 React 等现代框架。

Parcel

• 零配置打包工具，主打简单和快速，适合小型项目。

Rollup

• 主要用于打包 JavaScript 库，适合模块化开发。

Esbuild

• 高性能构建工具，以速度见长，支持 JavaScript 和 TypeScript。

Snowpack

• 基于 ESM 的现代构建工具，启动速度快，减少打包时间。

测试框架

Jest

• Facebook 开发的 JavaScript 测试框架，适用于单元测试和端到端测试。

Mocha

• 灵活的 JavaScript 测试框架，通常与 Chai 配合使用。

Cypress

• 强大的端到端测试框架，适用于 UI 测试。

Playwright

• 由 Microsoft 开发的现代 Web 测试框架，支持多浏览器自动化。

包管理工具

npm（Node Package Manager）

• npm 是 Node.js 自带的包管理器，用于安装和管理项目所依赖的库和工具。

pnpm

• pnpm 是一种高效的包管理工具，类似 npm，但它使用硬链接来节省磁盘空间。

yarn

• yarn 是 Facebook 开发的另一种包管理工具，提供比 npm 更快的包管理体验。

bun

• bun 是一种更快的 JavaScript 运行时和包管理器，它集成了构建工具和测试框架。

nvm（Node Version Manager）

• 管理 Node.js 版本的工具，允许开发者在不同项目中切换 Node.js 版本。
• 命令示例：nvm use 16.0.0。

volta

• 一种现代化的工具链管理器，专注于快速切换 Node.js、npm 和 yarn 的版本。
• 自动为项目使用指定版本的工具。

bower（已过时）

• 曾经流行的前端包管理工具，但由于 npm 和 yarn 的普及，现在几乎被废弃。

pnpm Workspaces

• 适用于管理 Monorepo 项目的功能，使多个包共享依赖。

Yarn Berry（Yarn 2+）

• Yarn 的新版本，引入了 Plug’n’Play（PnP） 模式，去掉了 node_modules 目录。

开发语言和语法

JavaScript

• 一种用于网页和应用开发的脚本语言，是前端开发的基础语言。

TypeScript

• TypeScript 是 JavaScript 的超集，增加了静态类型检查功能，使代码更安全和可维护。

JSX

• JSX 是一种 JavaScript 语法扩展，通常用于 React 开发，让 HTML 语法直接嵌入 JavaScript 中。

HTML（HyperText Markup Language）

• 网页的基础标记语言，用于定义网页的结构和内容。
• 与 JavaScript 和 CSS 一起构成前端三大技术。
• 版本：HTML5 是目前的标准版本。

CSS（Cascading Style Sheets）

• 用于定义网页的样式，如布局、颜色和字体。
• 版本：CSS3 引入了诸多新特性，如动画和媒体查询。

Sass（Syntactically Awesome Stylesheets）

• CSS 的预处理器，提供了变量、嵌套规则和混合等功能，增强了 CSS 的可维护性。
• 两种语法：Sass 和 SCSS（更接近 CSS 的语法）。

Less

• 另一种 CSS 预处理器，类似 Sass，但更早出现。
• 常见于老旧项目中，提供类似的增强功能。

JSON（JavaScript Object Notation）

• 轻量级的数据交换格式，常用于前后端通信和配置文件。
• 语法类似于 JavaScript 的对象字面量。

XML（Extensible Markup Language）

• 一种标记语言，用于存储和传输结构化数据。
• 虽然现代开发中使用较少，但在某些旧系统中仍然常见。

Markdown

• 一种轻量级标记语言，用于编写格式化文本内容，如文档和博客。
• 语法简单，易于阅读和写作。

GraphQL

• 一种查询语言，用于与 API 通信，提供比 REST 更灵活的数据获取方式。
• 允许客户端指定请求的数据结构。

Handlebars

• 一种模板语言，用于生成 HTML 页面，支持表达式和条件语句。

EJS（Embedded JavaScript Templates）

• 允许嵌入 JavaScript 代码的模板语言，常用于服务器端渲染。

YAML（Yet Another Markup Language）

• 一种人类可读的配置语言，常用于配置文件（如 CI/CD 配置和项目设置）。

CSS-in-JS

• 一种在 JavaScript 文件中直接编写 CSS 样式的方法，常用于现代框架（如 React）。

Babel

• 一种编译器工具，将现代 JavaScript 转换为向后兼容的版本，以便在旧浏览器中运行。

Vue 生态系统工具

1. Pinia
   • Pinia 是 Vue 3 的官方状态管理库，类似 Vue 2 的 Vuex，但更简单和现代化。
2. Vue Router
   • Vue Router 是 Vue.js 官方的路由管理库，用于管理页面导航和组件切换。
3. Vuex
   • Vuex 是 Vue 2 的状态管理库，类似于 Redux，但与 Vue 紧密集成。
   • 在 Vue 3 中已被 Pinia 取代，但旧项目中仍常见。
4. Vite
   • Vue.js 3 推荐使用的构建工具，由 Vue 的作者尤雨溪开发。
   • 提供快速的开发服务器和高效的构建。
5. Vue CLI
   • Vue 2 时代的项目生成器，提供了脚手架工具和配置。
   • 在 Vue 3 时代逐渐被 Vite 取代。
6. Vue Test Utils
   • Vue.js 官方的单元测试工具库，用于测试 Vue 组件。
   • 支持 Jest、Mocha 等测试框架。
7. Vue DevTools
   • 浏览器扩展工具，用于调试和分析 Vue 应用的状态和组件树。
   • 提供实时查看数据和路由信息的能力。
8. Composition API
   • Vue 3 引入的新功能，允许使用函数化的方式组织和复用组件逻辑。
   • 与 Options API 兼容。
9. Vue I18n
   • 用于管理和实现国际化（i18n）的库。
   • 提供多语言支持、日期和数字格式化功能。
10. Vue Apollo
    • Vue.js 的 Apollo 客户端集成，用于处理 GraphQL 查询和数据管理。
11. Nuxt.js
    • 基于 Vue.js 的框架，用于服务器端渲染（SSR）、静态站点生成和单页应用。
    • 提供自动路由生成和模块化开发支持。
12. Element Plus
    • 基于 Vue 3 的 UI 组件库，提供丰富的 UI 组件和主题定制功能。
    • Vue 2 对应版本是 Element UI。
13. Quasar Framework
    • 基于 Vue.js 构建的完整框架，支持构建 SPA、PWA、移动和桌面应用。
14. Vuetify
    • Material Design 风格的 Vue UI 组件库，广泛用于企业应用。
15. Vuelidate 和 VeeValidate
    • 两种常见的表单验证库，分别提供声明式和基于规则的验证方法。
16. Vue Meta
    • 用于管理 Vue 应用中的文档标题和 meta 标签，支持 SEO 优化。