Skip to content

Commit

Permalink
添加部分笔记的总结
Browse files Browse the repository at this point in the history
  • Loading branch information
Zz-ZzzZ committed Jan 2, 2024
1 parent cfd76e1 commit 6958be2
Show file tree
Hide file tree
Showing 8 changed files with 25 additions and 17 deletions.
2 changes: 1 addition & 1 deletion docs/code/dayjs.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Day.js源码阅读笔记

一个dayjs()就能完成许多繁琐的操作,有点意思
一个dayjs()就能完成许多繁琐的操作,可以学习到链式调用的设计方式。

## dayjs()

Expand Down
2 changes: 2 additions & 0 deletions docs/code/uai/scan.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# scanDirs

理解如何进行依赖扫描和认识一些比较少见却很实用的三方库。

## 分析动态依赖导出关系

先来分析用户提供的依赖路径
Expand Down
2 changes: 2 additions & 0 deletions docs/code/vca.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

这个库是在使用`cube-ui`时注意到的,一般用于C端创建`modal`/`dialog`会很方便[https://didi.github.io/cube-ui/#/zh-CN/docs/create-api]

有助于理解函数式组件调用的实现思路。

### 添加 vue-create-api

从入口文件`src/index.js`内进入,`vue-create-api`是一个`Vue`插件,因此需要提供一个`install`的方法来挂载。
Expand Down
3 changes: 2 additions & 1 deletion docs/code/vue-clamp.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# vue-clamp源码阅读笔记

最近业务内有用到该插件,对实现方式比较好奇,因此来阅读一下源码,网上搜到的获取文本行数都是依靠文本行高来获取,这个则用了另外一个方式
最近业务内有用到该插件,对实现方式比较好奇,因此来阅读一下源码,网上搜到的获取文本行数都是依靠文本行高来获取,这个则用了另外一个方式,
来学习下其实现思路。

## Clamp.js
一些简单的方法就直接在上面写注释了
Expand Down
2 changes: 2 additions & 0 deletions docs/code/vue-cli/home.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

一直对`vue-cli-service`如何启动比较感兴趣,因此对着官方文档和`debug`尝试阅读一下(**version: vue-cli v4**)。

可以学习到命令行参数的获取与使用和内部对于`webpack`配置的合并。

## vue-cli-service.js

使用`semver.js`库来匹配当前操作系统的`node`版本是否大于`vue-cli-service`所要求的最低`node`版本(最低为**node v8**)。
Expand Down
2 changes: 1 addition & 1 deletion docs/code/vue-cli/serve.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vue-cli-service serve

接下来阅读一下`vue-cli-service`中的`serve`指令。
接下来阅读一下`vue-cli-service`中的`serve`指令,也是内部对于`webpack-server`的进一步封装

## 注册指令到Service类

Expand Down
25 changes: 13 additions & 12 deletions docs/code/vue-demi.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# vue-demi源码阅读笔记

在统一封装Hooks库时有用到vue-demi这个库,其实现方式比较有趣,同时也才知道npm script也是有生命周期的
vue-demi的作用就是作为一个枢纽,所有需要的api都从这里导入,而枢纽会通过项目内的Vue版本来写入对应的文件使得从vue-demi导入时实际就是从vue中导入
这样在编写兼容库时就不需要大量的if版本判断
在统一封装`Hooks`库时有用到`vue-demi`这个库,其实现方式比较有趣,同时也才知道`npm script`也是有生命周期的
`vue-demi`的作用就是作为一个枢纽,所有需要的`api`都从这里导入,而枢纽会通过项目内的`Vue`版本来写入对应的文件使得从`vue-demi`导入时实际就是从`vue`中导入
这样在编写兼容库时就不需要大量的`if`版本判断。

## npm script - postinstall

npm script 是 package.json 中定义的一组内置脚本和自定义脚本。他们的目标是提供一种简单的方法来执行重复的任务,比如:启动项目、打包项目等
`npm script``package.json` 中定义的一组内置脚本和自定义脚本。他们的目标是提供一种简单的方法来执行重复的任务,比如:启动项目、打包项目等

:::info script
```json
Expand All @@ -18,9 +18,9 @@ npm script 是 package.json 中定义的一组内置脚本和自定义脚本。
```
:::

在npm script中,有一部分内置script,在npm执行不同的命令时触发对应的script,形成npm script的生命周期
`npm script`中,有一部分内置`script`,在`npm`执行不同的命令时触发对应的`script`,形成生命周期。

postinstall则是内置script中的一员,它在npm install后触发,vue-demi则在此阶段进行操作
`postinstall`则是内置`script`中的一员,它在`npm install`后触发,`vue-demi`则在此阶段进行操作。

## postinstall.js

Expand Down Expand Up @@ -64,7 +64,7 @@ function switchVersion(version, vue) {
}
```

读取Vue的版本,根据Vue实例内的version属性来判断当前运行版本来分别写入对应的文件
读取`Vue``version`,根据`Vue`实例内的`version`属性来判断当前运行版本来分别写入对应的文件。

```javascript
function updateVue2API() {
Expand Down Expand Up @@ -92,14 +92,15 @@ export { ${exports.join(', ')} } from '@vue/composition-api/dist/vue-composition
}
```

在Vue2.6及以下的版本使用composition-api语法时需要搭配@vue/composition-api插件,同时过滤掉了@vue/composition-api内的default、version属性
避免覆盖原Vue示例下的对应属性,如果使用
`Vue2.6`及以下的版本使用`composition-api`语法时需要搭配`@vue/composition-api`插件,同时过滤掉了`@vue/composition-api`内的`default``version`属性。

避免覆盖原`Vue`示例下的对应属性,如果使用

```javascript
export * from '@vue/composition-api/dist/vue-composition-api.mjs'
```

则使用version时导入的是@vue/composition-api内的version,会有冲突[https://github.com/vueuse/vue-demi/issues/26]
则使用version时导入的是`@vue/composition-api`内的version,会有冲突[https://github.com/vueuse/vue-demi/issues/26]

```javascript
const dir = path.resolve(__dirname, '..', 'lib')
Expand All @@ -118,7 +119,7 @@ function copy(name, version, vue) {
}
```

获取并定义对应Vue版本的路径和文件名称,随后将其以 utf-8 格式覆盖对应的文件
获取并定义对应`Vue`版本的路径和文件名称,随后将其以 `utf-8` 格式覆盖对应的文件

如Vue2.7时,v2.7下的所有文件将会覆盖lib目录下的所有文件(除了iife.js文件,由于iife的性质因此作者直接在该文件内写好了三个版本的判断,而不通过覆盖的方式)
`Vue2.7`时,`v2.7`下的所有文件将会覆盖`lib`目录下的所有文件(除了`iife.js`文件,由于`iife`的性质因此作者直接在该文件内写好了三个版本的判断,而不通过覆盖的方式)

4 changes: 2 additions & 2 deletions docs/code/vuex-persistedstate.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vuex-persistedstate 源码阅读
# vuex-persistedstate 源码阅读笔记

### 一个持久化缓存store数据的vuex插件
一个持久化缓存store数据的vuex插件,可以了解Vuex的插件开发。

---

Expand Down

0 comments on commit 6958be2

Please sign in to comment.