青训营后期笔记
Vite知识体系
前端构建工具：
提供模块化加载方案、兼容不同的模块规范
高级语法转译+资源加载解析
输出压缩，TreeShaking（无用代码删除），语法降级
提升开发效率 HMR 热更新
Vite定义
新一代前端构建工具
组成：
- No-bundle开发服务 源文件无需打包
- 生产环境基于Rollup的Bundler
特征：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
ECMAScript Modules 简称 ESM，也叫 JavaScript modules，是 2015 年 6 月随着 ES6(ES2015) 正式发布的模块化解决方案。
Vite开箱即用的功能等价于——webpack webpack-dev-server css-loader style-loader less-loader sass-loader postcss-loader file-loader 。。。
传统构建模式：是将所有资源都打包好，再上线
Vite就是按需加载
使用
## 创建工程
npm init vite-app yk_vue3
## 进入工程目录
cd yk_vue3
## 安装依赖
npm install
## 运行
npm run dev
前端开发调试
前端bug的特点
1）多平台：浏览器、nodejs、桌面应用
2）多环境：本地开发 线上开发
3）多工具：Chrome devTools、Charles、vConsole等
4）多技巧：Console、BreakPoint、SourceMap等
Chrome DevTools
动态修改元素和样式
在Computed中可以看到最终生效的样式，以及对应的CSS文件来源
Console
有不同类型
console.log
console.warn
console.error
console.debug
console.info
在调试器中选择不同的分类对日志进行查看
console.dir：可以展示对象中的属性和对应的值
Source Tab
Break Point是存放所有调试断点的列表，Watch则是观察变量值的变化
scope查看作用域列表（包含闭包）
压缩后的代码调试
使用sourceMap（webpack中）
perfomace tab
主要用来检测性能问题，开发时用的比较少，但遇到页面性能提升瓶颈时，是个很好的利器。
【青训营】- 前端必须知道的开发调试知识 - 掘金 (juejin.cn)
Application
应用面板，主要用来查看本地的一些缓存数据，比如Storage、Cookie、离线缓存、本地数据库等。
常用调试技巧
在source中调试了代码，会实时更新效果，但是浏览器刷新就会全部恢复原样，这样调试代码效率很低，因此可以使用Overrides保存线上修改后的文件，能够清晰的看出改动了哪些地方，最后修改代码也很方便。
前端框架中的设计模式
MVC模式
MVVM模式
Flux模式
观察者模式
详解前端框架中的设计模式 | 青训营 - 掘金 (juejin.cn)
操作系统部分内容需要详细的看
进程 线程 计网 临界区互斥等 数据库 MySQL
