一些前端学习的知识记录

CSS预处理器

能够用一些逻辑操作来实现css，相关编译器编译成对应的css代码

Vite

主要能够启动前端服务并且能够按需加载编译请求，并且热更新友好 热更新是通过websocket服务（web）+文件监听器实现的（local）

npm run xxx 干了啥？

其实就是去package.json里面去找scripts里面xxx对应的命令 解析 -> 编译 -> 执行 但是只支持前端Node.js的一些命令

Vite和npm、Node.js啥关系？

node.js：原本的js代码只能通过浏览器进行渲染编译，现在有了Node的话，就可以脱离浏览器直接启动一个前端服务，主要就是在生产开发过程中使用，正式环境就跟他没关系了，正式环境就用的一些编译后的js脚本（➕一些资源和html）。所以Node.js有点像是一个引擎

NPM (Node Package Manager)：就是node的包管理工具，可以管理安装包、发布包、也可以运行node相关的一些脚本

Vite：他的话就是一个前端构建工具，1. 能构建一个基础的前端工程项目、2. 启动前端服务、3. 热更新。Vite 本身是用 JavaScript (或 TypeScript) 编写的，并且需要运行在 Node.js 环境之上。当执行 vite 或 npm run dev (其中 dev 脚本是 vite) 时，实际上是 Node.js 引擎在执行 Vite 的代码。

• Node.js 是一个“工厂”（运行环境）。
• NPM 是这个工厂里的“仓库管理员”（包管理器）。
• Vite 是这个工厂里的一台“高效生产线机器”（构建工具），它需要这个工厂（Node.js）才能运转，并且由仓库管理员（NPM）负责安装和维护。

思考：那vite提供的前端服务实际上用的是node本身的吗？

中间件

启动vite前端服务的时候，会执行下面这个流程： 准备中间件： Vite 会注册一系列中间件，用于拦截浏览器发来的请求。

DOM

Vue

模块化开发（mvvm）+ 虚拟DOM

• 条件-循环
• 事件处理
• 双向数据绑定
• Vue的组件

组件是为了复用

• 计算属性
• 内容分发
• 自定义事件

Vue-Router

Axios

解决Vue通信不友好问题

webPack打包工具

专门用于前端打包 还有一些类似的工具，比如vite

element UI

前端的各个组件工具（适配Vue）