• 框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。
• 工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。

一、常用前端框架React.js

React.js 于 2013 年由 Meta(Facebook 前身) 推出，是一款开源的、免费的 JavaScript 库。React.js 被用于开发具有高流量网页的 UI 组件。React.js 是声明式的，因此使交互式 UI 开发无痛。你可以为应用程序的每个状态设计单独的视图，当数据发生变化时，React.js 将更新这些视图以呈现正确的组件。React.js 是基于组件的，也就是说，你可以创建具有状态的已经封装好的组件，然后组合它们来构建复杂的 UI。

Vue.js

Vue.js 是一个开源的、先进的 MVV（模型 - 视图 - 视图）模型 JavaScript 框架。虽然 Vue.js 是在 2016 年开发的，但由于它所贡献的功能，它已经成为一些开发者的日常工具。通过结合支持库和现代工具，Vue 可以用于开发复杂的单页应用程序。由于核心 Vue 库以视图层为中心，使之更容易被拿来与其他项目和库集成。

Vue.js 提供的一些关键特性包括虚拟 DOM、组件、动画、事件处。

Angular.js

Angular.js 是 2010 年发布的一个开源的、基于 JavaScript 的前端框架。AngularJS 用于开发动态 Web 应用程序。它允许你使用 HTML 作为模板语言，并扩展其语法明确定义应用程序的组件。

二、JS实用工具Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs
复制代码

基本用法

import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)
复制代码

qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs
复制代码

基本用法

import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22
复制代码

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole
复制代码

基本用法

import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')
复制代码

animejs

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs
复制代码

基本用法

import anime from 'animejs/lib/anime.es.js'
// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})
复制代码

lodash.js

一个一致性、模块化、高性能的 JavaScript 实用工具库。

npm install lodash
复制代码

基本用法

import _ from 'lodash'
_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]
复制代码