速通web全栈开发
开发工具：
IDEA+VSCode
接口测试：postman、Apifox
数据库连接工具：Navicat
版本控制：git
redis客户端：Another Redis Desktop Manager、RESP
协作设计开发平台
蓝湖、墨刀
切图：ps、像素大厨
后端：
web框架：SpringBoot
持久层技术：MyBatis、MyBatisPlus
自动生成get、set、toString：lombok
校验：spring-boot-starter-validation
分页插件：pagehelper
代码生成器：Mybatis-plus的AutoGenerator、Mybatis Generator（MBG）
存储：阿里云oss、minio
缓存：redis
加密：
密码哈希：spring-security-crypto、
生成RSA密钥对：bcpkix-jdk15on
验证码生成：Kaptcha
开发环境热部署：spring-boot-devtools
支付：alipay-sdk-java
消息中间件：kafka
定时任务：xxl-job
网关：nacos
远程调用：openfeign
接口调试：Swagger
身份认证：JWT Token、OAuth、sa-token
数据库：mysql、MongoDB
前端：
1.typescript:如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
2.React/Vue:安装react-compiler / vue-complier,将我们写的jsx文件或者.vue文件转换为renderi函数
3.less/sass/postcss,/component-style:我们又需要安装less-loader,sass-loader等一系列编译工具
4.语法降级：babe1–>将es的新语法转换I旧版浏览器可以接受的语法
5.体积优化：terser–>将我们的代码进行压缩变成体积更小性能更高的文件
6…
稍微改第一点点东西，非常麻烦
将App.tsx–>tsc–>App.jsx–>React-complier–>js文件
有一个东西能够帮你把tsc,react-compiler,.1ess,babel,uglifyjs全部集成到一起
我们只需要关心我们写的代码就好了
我们写的代码一变化–>有人帮我们自动去tsc,react-compi1er,less,babe1,terser全部挨个走一遍–>js
这个东西就叫做构建工具
打包：将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包，打包完成以后会给我们一个浏览器可
以认识的文件
一个构建工具他到底承担了哪些脏活累活：
1.模块化开发支持：支持直接从node modules.里引入代码+多种模块化支持
2,处理代码兼容性：比如babe1语法降级，less,ts语法转换(不是构建工具做的，沟建工具将这些语法对应的处理工成进来自动化处理)
3.提高项目性能：压缩文件，◆代码分割
4.优化开发体验：
- 构建工具会帮你自动监听文件的变化，当文件变化以后自动帮你调用对应的集成工具进行重新打包，然后再浏览器重新运
行（整个过程叫做热更新，hot replacement）- 开发服务器：跨域的问题，用react-cli create-react-element vue-cli解决跨域的问题
构建工具他让我们可以不用每次都关心我们的代码在浏览器如何运行，我们只需要首次给构建工具提供一个配置文件（这个配置
文件也不是必须的，如果你不给他他会有默认的帮你去处理)，有了这个集成的配置文件以后，我们就可以在下次需要更新的时
候调用一次对应的命令就好了，如果我们再结合热更新，我们就更加不需要管任何东西，这就是构建工具去做的东西，他让我
们不用关心生产的代码也不用关心代码如何在浏览器运行，只需要关心我们的开发怎么写的爽怎么写就好了
存储技术：localStorage、sessionStorage、Cookie、IndexedDB
缓存技术：cache API与Service Worker
管理node版本：nvm
包管理器：pnpm、yarn、npm
构建和打包工具
- Webpack: 模块打包器
- Vite: 新一代前端构建工具
- Rollup: JavaScript模块打包器
框架：Vue、react、Angular
路由管理
- Vue Router: Vue.js的官方路由管理器
- React Router: React应用的路由解决方案
- Angular Router: Angular内置路由系统
状态管理：
Vuex、pinia、Redux、MobX
pinia持久化插件：pinia-plugin-persistedstate
响应式设计
- 媒体查询: CSS3媒体查询
- 弹性布局: Flexbox
- 网格布局: CSS Grid
图形：
2D Canvas 库：Konva.js
手势识别：Hammer.js
云服务平台：Amazon Web Services (AWS)
动画和交互
- CSS动画: 原生CSS动画
- JavaScript动画库: 如
GSAP、LottieFiles - 过渡效果: CSS transitions
第三方组件：ElementUI、Ant
css预处理器：scss、less、sass、Stylus
数据模拟：MockJS
富文本编辑器：@vueup/vue-quill
网络请求
- Axios: 基于Promise的HTTP客户端
- Fetch API: 原生浏览器API
- jQuery AJAX: jQuery提供的AJAX功能
工具：
加密：crypto-js、、js-sha256、jsencrypt
cookie工具：js-cookie
事件总线：mitt
生成本地开发证书：mkcert
自动生成目录别名：vite一aliases
模拟浏览器环境：jsdom
代码规范统一：
代码检查：eslint
构建时自动执行eslint：lint-staged
格式化：prettier
兼容处理：
代码降级、源码转换：Babel、@vitejs/plugin-legacy
CSS 自动添加浏览器前缀工具： Autoprefixer
css降级：postcss-preset-env
为旧版浏览器或环境提供对现代 JavaScript 特性的支持：core-js
自动导包：unplugin-auto-import
自动生成路由：vite-plugin-pages vite-plugin-vue-layouts
自动生成api：openapi-typescript-codegen、@zeronejs/cli
安全：
HSTS
生产环境移除console.log、debug：terser、@rollup/plugin-strip
浏览器指纹识别库：FingerprintJS
npm 官方安全审计：audit
依赖漏洞扫描：snyk
性能优化：
控制资源加载优先级：Priority Hints
HTML 压缩插件：vite-plugin-html、vite-plugin-minify
图片压缩：vite-plugin-imagemin、imageOptimize
打包后生成stats.html 文件产物分析关系图：rollup-plugin-visualizer
cdn加速：vite-plugin-cdn-import
测试工具：
- Jest: JavaScript测试框架
- Cypress: 端到端测试工具
- Vue Test Utils: Vue组件测试工具
- vitest: 测试运行器
其他：
控制当网页被分享到社交平台时所显示的内容（如标题、描述、图片等）：Open Graph
浏览器api：
DOM API
document: 操作HTML文档结构element: 元素节点操作querySelector/querySelectorAll: 选择器APIaddEventListener: 事件监听
网络API
fetch: 现代HTTP请求APIXMLHttpRequest: 传统AJAX请求WebSocket: 双向通信协议navigator.sendBeacon: 页面卸载时发送数据
设备API
navigator: 浏览器和设备信息geolocation: 地理位置APImediaDevices: 媒体设备访问battery: 电池状态API
图形和多媒体API
canvas: 2D/3D图形绘制WebGL: 3D图形渲染AudioAPI: 音频处理VideoAPI: 视频播放控制
性能和调试API
console: 控制台输出performance: 性能监控debugger: 调试断点
后台管理：
vue-admin-template
不包含真实后端，mock模拟，轻量基础模版
若依
完整的后台管理系统
项目部署：
阿里云ECS+Nginx