前端开发中用到过的工具

1.前言本文是记录本人在前端开发中遇到过的工具会不断更新以及对于npm安装工具方式的理解。2.npm安装工具方式理解简单的拿normalize.css这个工具来举例以下都是安装normalize.css这个工具的方式按照简写分类同类安装方式效果一模一样第一类安装到dependenciesnpm install normalize.css npm i normalize.css第二类安装到dependenciesnpm install --save normalize.css npm install -S normalize.css npm i -S normalize.css npm i --save normalize.css第三类developmentnpm i -D normalize.css npm install -D normalize.css第四类安装到整个系统全局安装npm install -g normalize.css2.1区别说明1.install的简写是i--save的简写是-S,注意大小写和中划线的变化2.第一类和第二类的区别不明显在生产环境中通常推荐只使用第一类的形式而在开发过程中推荐使用第二类。这能确保依赖的透明性和版本的控制。会在pack.json依赖文件中的dependencies地方声明正式上线后会使用到这个工具。3.第三类则是安装开发依赖项这些依赖只在开发环境中用于构建和测试工具如工具库、构建工具等。会在pack.json依赖文件中的development地方声明正式上线后不会使用到这个工具。4.第四类则是将工具安装在我们系统中不管是哪个项目都能使用。比如我们npm工具就是全局安装的一般不会使用这类安装方式3.react中的工具3.1 zustand.js工具react中平替Redux状态管理的工具npm install --save zustand3.2 echarts.js工具可视化图表工具npm install --save echarts3.3 normalize.css工具去除浏览器默认样式比如body的内外边距npm install --save normalize.css3.4 craco工具react中重新配置路径的工具将src改成npm i -D craco/craco在根目录下新建craco.config.js文件和jsconfig.json文件具体文件中代码直接ai一下需要更改package.json文件中项目启动方式,更改后重新运行项目// 将代码 scripts: { start: react-scripts start, build: react-scripts build, test: react-scripts test, eject: react-scripts eject }, 更改成 scripts: { start: craco start, build: craco build, test: craco test, eject: react-scripts eject },3.5 axios工具axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。npm install axios3.6 ant-design工具react开发中使用最广泛的ui组件库如同vue中的element uinpm install antd --save引入使用在需要使用的地方引入即可无需挂载注册import {Button} from antd3.7 sass工具css样式预处理工具npm i -D sass3.8 server工具react中用于搭建本地服务器用于模拟后端服务器的行为运行后相当于请求后端接口一样npm i -D json-server3.9 react-router-dom工具一个用于构建react路由库的工具简单来说就是用于创建路由实例从而配置路由npm install react-router-dom3.10classNames工具react中用于动态添加类名通过条件判断是否添加类名npm install --save classNames3.11 toolkith和react-redux工具react的状态管理工具npm i reduxjs/toolkit react-redux3.12 dayjs工具一个用于处理时间的工具npm install dayjs引入import dayjs from dayjs使用dayjs(new Date()).format(YYYY-MM-DD HH:mm:ss)说明dayjs()默认是new Date()4.node.js中的工具4.1 nrm工具切换下载源用于切换淘宝镜像和国外服务器下载源npm install -g nrm4.2 i5ting_toc工具将.md文件转换成.html文件使用方式i5ting_toc -f 要转换的文件路径 -onpm install -g i5ting_toc4.3 nodemon工具监听项目文件的变动当代码被修改后nodemon会自动帮助我们重启项目无需再关闭服务器再重启服务器npm i -g nodemon4.4 express工具基于 Node.js 平台快速、开放、极简的 Web 开发框架用于快速创建web服务器npm i express4.17.1 --save4.5 cors工具用于解决跨域问题的工具npm i cors4.6 mysql工具用于连接数据库并对数据进行增删改查npm i mysql4.7 express-session工具用于认证用户npm i express-session4.8 jsonwebtoken和express-jwt工具jsonwebtoken用于生成JWT字符串express-jwt用于将JWT字符串解析还原成JSON对象总的来说就是用来生成tokennpm i jsonwebtoken express-jwt4.9 bcryptjs工具对用户密码加密处理npm i bcryptjs4.10 hapi/joi和escook/express-joi工具用于表单验证hapi/joi定义验证规则escook/express-joi自动进行校验npm i hapi/joi escook/express-joi5.Electron中的工具5.1 electron开发pc端应用的工具npm i electron -D5.2 electron-builder工具electron项目打包工具npm i electron-builder -D6.vue中的工具6.1 vue-diffvue3中用来比较数据差异的插件可以把有差异的地方通过颜色标识出来相当于vscodevue2中可以使用diff插件npm i vue-diff6.2 vue-draggable-nextvue3中用来拖拽div的插件vue2中应该不能用npm i vue-draggable-next7.其他7.1 npm registry manager用来方便地切换和管理 npm 镜像源npm install -g nrm查看镜像源列表 *代表当前镜像源nrm ls切换成淘宝镜像源nrm use taobao7.2 lodash用来处理数据的工具前端使用比较火爆例如对象的深浅拷贝、数组的排序等安装npm i lodash引入import _ from lodash7.3 uuid用于生成随机idnpm i uuid引入import { v4 as uuid4 } from uuid使用调用uuid4()方法即可获得随机id