前言
上一篇文章 一份超详细VuePress + Github Pages教程 中详细介绍了 VuePress 的搭建和部署到 GitHub Pages 上，其中部署 GitHub Pages 采用的是手动部署。这篇文章教大家另一种部署方法 Github Actions，文章还是以部署 VuePress 静态网站为例：
准备工作
-
准备一个 VuePress 网站
-
完成 ssh的配置
-
创建 GitHub个人令牌
...大约 6 分钟
前言
个人认为，有自己的个人博客是一种很酷的象征，同时在求职的时候，也会给人留下一个良好的印象。所以我一直想搞一个自己的博客网站，但是想到搞网站还要学习 后端知识+服务器知识 ，我就失去动力了...
最近发现了一个神奇的工具 VuePress ，它满足了我所有的需求
- 静态网站生成器（不用另外学后端知识啦）
- 路由会根据 Markdown 文件的相对路径来自动生成（约定式路由）
- 可以部署到 GitHub 上（没有自己的服务器也可以部署哇）
- V2.0版本支持
Vue3 + TypeScript + Vite（就是你了）
...大约 8 分钟
深度选择器的使用场景一般是 修改第三方UI组件库，如vant，elementUI，antd，同时页面中又使用了 scoped
>>>
原生css式样使用 >>>
<style scoped>
.myclass >>> .el-tag {
// 样式
}
</style>
...小于 1 分钟
小程序
编译到微信小程序u-icon上的class无效
- 问题：编译到微信小程序上后，组件如
<u-icon />上的class、style无效
...小于 1 分钟
前言
传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。
前端路由
hash模式就是通过监听浏览器的hash值(锚点)来实现前端渲染；
history模式是通过操作浏览器的历史记录并监听这个动作来实现前端渲染。浏览器每访问一个地址，都会在浏览器栈里存入路径记录。
模式
- hash模式：location.hash+hashchange
location.hash始终指向页面url中#之后的内容，用来修改浏览器的地址；
hashchange来监听变化做出相应渲染
...大约 4 分钟
与vue相比
-
相同点
- 虚拟DOM
-
不同的
语法vue-原生语法、react-JSX语法数据绑定vue-v-model双向绑定、react-setState单向流动propsvue-props直接写、react-需要引入prop-typesDOM更新策略react自顶向下重新渲染render树条件渲染vue-v-if、react-借助三元运算符，逻辑性更强兄弟组件通信vue-eventBus-on/emit、react-subscribe/publish路由信息vue-组件里获取this.$route、react-路由组件里获取this.props.history/location/match，一般组件没有css作用域vue-scoped、react-module(仅选择器，原生标签不行)
...大约 2 分钟
变量声明 let、const
箭头函数 =>
- 自身不绑定this，this指向当前上下文
- 不能作为构造函数
- 没有arguments，用rest
模板字符串 ${}
函数参数默认值
对象结构
扩展运算符 ...
对象属性简写
Promise
-
概念
Promise 本身是同步的立即执行函数， 当在 executor 中执行 resolve 或者 reject的时候, 此时是异步操作，会先执行then/catch等，当主栈完成后， 才会去调用 resolve/reject 中存放的方法执行。
-
async/await
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。
Async/Await 就是一个自执行的 generate 函数。利用 generate 函数的特性把异步的代码写成“同步”的形式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个 promise 对象.
-
静态方法
- Promise.all 所有成功才执行then，有一个失败后面都会被忽略并执法catch
- Promise.race 拿到最快的看是then还是catch
- Promise.allSettled 所有执行完毕，返回包含了每个promise结果的对象数组 [{ status: "fulfilled", value: 3 }, { status: "rejected", reason: "foo" }]
- Promise.any 有成功就执行then，输出第一个成功的，所有失败才执行catch ES2021
...大约 2 分钟
MVVM
-
概念
- Model(数据)
- View(视图)
- ViewModel(负责两者之间的数据处理操作)
-
特点
- 低耦合: 视图view可独立于model的变化和修改
- 可复用性: 视图逻辑viewModel可用于不同的view
- 独立开发
- 可测试性
-
总结
...大约 19 分钟
与vue2相比
生命周期
- 钩子函数加
on beforeCreate和created包含在setup函数中beforeDestroy改为onBeforeUnmount，destroyed改为onUnmounted
...大约 2 分钟
开发的时候我们会用框架如Vue、React，ES6模块语法、Promise，开发样式使用LESS、SASS预处理器，这些代码是不能被浏览器识别的，如果要运行，就必须经过编译。
前言
- webpack会以一个或者多个文件作为打包入口，将项目所有文件编译组合成一个或者多个文件输出，称为bundle，输出的文件可以在浏览器运行。
- webpack本身功能有限：
开发环境：仅能编译JS中的ES module语法
生产环境：能编译JS中的ES module语法，还能压缩JS代码
entry
...大约 4 分钟