diff --git a/source/_posts/2020-09-10-git-commit-control.md b/source/_posts/2020-09-10-git-commit-control.md
new file mode 100644
index 0000000000..38b10c7200
--- /dev/null
+++ b/source/_posts/2020-09-10-git-commit-control.md
@@ -0,0 +1,297 @@
+title: 规范GIT代码提交信息&自动化版本管理
+subtitle:
+cover: https://img11.360buyimg.com/imagetools/jfs/t1/123611/18/12202/317391/5f5a1073E7dc03d83/9f2adf4821068f28.jpg
+category: 经验分享
+tags: 
+    - git
+    - git commit
+    - Conventional Commits
+    - semver
+    - standard version
+    - commitizen
+author:
+    nick: eijil
+date: 2020-09-10 17:00:00
+---
+## 前言
+
+`git`作为一个开发人员必不可少的工具，代码提交也是日常一个非常频繁的操作，如果你或你的团队目前对提交信息还没有一个规范或约束，那么你有必要看看本文的内容了。
+
+## 为什么要规范提交信息
+
+首先规范提交信息肯定是有必要的，简单总结下几点好处：
+
+* 让项目的维护或使用人员能了解提交了哪些更改
+* 清晰的历史记录，可能某天自己就需要查到呢
+* 规范的提交记录可用于自动生成修改日志(CHANGELOG.MD)
+* 基于提交类型，触发构建和部署流程
+
+
+## 使用什么规范
+
+**`Conventional Commits`(约定式提交规范)**，是目前使用最广泛的提交信息规范，其主要受[AngularJS规范](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)的启发,下面是一个规范信息的结构：
+```
+<type>[optional scope]: <subject>
+//空一行
+[optional body]
+//空一行
+[optional footer(s)]
+```
+### 规范说明
+
+
+**`type`** 提交的类别，必须是以下类型中的一个
+
+```
+feat：增加一个新功能
+fix：修复bug
+docs：只修改了文档
+style：做了不影响代码含义的修改，空格、格式化、缺少分号等等
+refactor：代码重构，既不是修复bug，也不是新功能的修改
+perf：改进性能的代码
+test：增加测试或更新已有的测试
+chore：构建或辅助工具或依赖库的更新
+
+```
+**`scope`** 可选，表示影响的范围、功能、模块
+
+**`subject`**
+必填，简单说明，不超过50个字
+
+**`body`**
+选填，用于填写更详细的描述
+
+**`footer`** 
+选填，用于填关联`issus`,或`BREAK CHANGE`
+
+**`BREAKING CHANGE`**
+
+必须是大写，表示引入了破坏性 API 变更，通常是一个大版本的改动，`BREAKING CHANGE:` 之后必须提供描述，下面一个包含破坏性变更的提交示例
+```
+feat: allow provided config object to extend other configs
+
+BREAKING CHANGE: `extends` key in config file is now used for extending other config files
+```
+
+
+>更详细的说明请看[约定式提交规范](https://www.conventionalcommits.org/zh-hans/v1.0.0-beta.4/#%e7%ba%a6%e5%ae%9a%e5%bc%8f%e6%8f%90%e4%ba%a4%e8%a7%84%e8%8c%83)
+
+
+### 如何约束规范
+
+怎么确保每个提交都能符合规范呢，最好的方式就是通过工具来生成和校验，`commitizen`是一个nodejs命令行工具，通过交互的方式，生成符合规范的git commit，界面如下：
+
+![](https://github.com/commitizen/cz-cli/raw/master/meta/screenshots/add-commit.png)
+
+开始安装:
+
+```
+# 全局安装
+npm install -g commitizen 
+# 或者本地安装
+$ npm install --save-dev commitizen
+# 安装适配器
+npm install cz-conventional-changelog
+```
+`packages.json`在配置文件中指定使用哪种规范
+
+``` js
+...
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+```
+安装完成后可以使用`git cz` 来代替`git commit`,然后根据提示一步步输入即可
+
+### 格式校验commitlint
+可能你不想每次都通过交互界面来生成，还是想使用`git commit -m 'message'`，那么为了确保信息的正确性，可以结合`husky`对提交的信息进行格式验证
+
+安装依赖
+``` bash
+npm install --save-dev @commitlint/{config-conventional,cli}
+# 安装husky
+npm install --save-dev husky
+
+```
+添加 `commitlint.config.js`文件到项目
+``` bash
+echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
+``` 
+`package.json`配置
+```
+
+#git提交验证
+"husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+```
+
+OK到这一步就完成了，最后给你项目README.MD加上一个`commitizen-friendly`的标识吧
+```
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+```
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+## 自动版本管理和生成CHANGELOG
+
+规范化的提交信息除了能很好描述项目的修改，还有一个很好的作用就是能根据提交记录来生成CHANGELOG.MD和自动生成版本号等功能。
+
+
+### standard-version
+
+一个用于生成`CHANGELOG.md`和进行`SemVer(语义化版本号)`发版的命令行工具
+
+主要功能：
+* 自动修改最新版本号，可以是`package.json`或者自定义一个文件
+* 读取最新版本号，创建一个最新的`git tag`
+* 根据提交信息，生成`CHANGELOG.md`
+* 创建一个新提交包括 `CHANGELOG.md`和`package.json`
+
+
+### 语义化版本控制(SemVer)
+
+先简单了解下什么是语义化的版本控制，其是由`GitHub`发起的一份用于规范版本号递增的规则，
+##### 版本格式
+主版本号.次版本号.修订号，版本号递增规则如下：
+
+* 主版本号(major)：当你做了不兼容的 API 修改，
+* 次版本号(minor)：当你做了向下兼容的功能性新增，可以理解为Feature版本，
+* 修订号(patch)：当你做了向下兼容的问题修正，可以理解为Bug fix版本。
+
+先行版本号可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
+
+##### 先行版本
+当即将发布大版本改动前，但是又不能保证这个版本的功能 100% 正常，这个时候可以发布先行版本：
+
+* alpha: 内部版本
+* beta: 公测版本
+* rc: 候选版本(Release candiate)
+
+比如：1.0.0-alpha.0,1.0.0-alpha.1,1.0.0-rc.0,1.0.0-rc.1等。
+
+ `standard-version` 会根据提交的信息类型来自动更改对应的版本号,如下:
+* feat: 次版本(minor)+1
+* fix: 修订号(patch) +1
+* BREAK CHANGE: 主板号(marjor) +1
+
+> `standard-verstion` 生成的`CHANGELOG`只会包含`feat`,`fix`,`BREACK-CHANGE`类型的提交记录
+
+
+#### 使用
+``` bash
+npm i --save-dev standard-version
+```
+
+添加`npm script`
+
+``` 
+{
+ scripts:{
+   "release": "standard-version",
+   "release:alpha": "standard-version --prerelease alpha",
+   "release:rc": "standard-version --prerelease rc"
+  }
+}
+```
+执行：
+``` bash
+# npm run script
+npm run release
+# or global bin
+standard-version
+```
+或者你想指定发行版本号：
+
+``` bash
+#指定类型 patch/minor/marjor
+npm run release -- --release-as patch
+#指定版本号
+npm run release -- -- release-as 1.1.0
+```
+
+##### 生命周期
+
+* `prerelease`:所有脚本执行之前
+* `prebump`/`postbump`: 修改版本号之前和之后
+* `prechangelog`/`postchangelog`:生成changelog和生成changelog之后
+* `pretag`/`postag`:生成tag标签和之后
+
+`standard-version`本身只针对本地，并没有`push`才操作，我们可以在最后一步生成tag后，执行push操作，在`paceage.json`中添加
+``` 
+"standard-version": {
+    "scripts": {
+      "posttag": "git push --follow-tags origin master && npm publish"
+    }
+  }
+```
+
+
+
+还有更多配置功能自行查阅 [官方文档](https://github.com/conventional-changelog/standard-version)
+
+#### 其它类似工具
+除了`standard-version`,还有其它类似的工具,有兴趣可以去了解下
+* [semantic-release](https://github.com/semantic-release/semantic-release)
+* [lerna](https://lerna.js.org/)
+
+
+## 修改Git Commit
+
+为了使`CHANGELOG.MD`更能加直观看到每个版本的修改，我们尽量保证每次提交都是有意义的，但实际开发过程中，不可避免会提交了一些错误的commit message，下面介绍几个`git`命令来修改`commit`
+
+
+### 1 修改最后一次提交
+`git commit --amend`
+
+该命令会创建一个提交并覆盖上次提交，如果是因为写错或者不满意上次的提交信息，使用该命令就非常适合。
+### 2 合并多条提交
+`git reset --soft [commitID]`
+
+如果你想合并最近几条提交信息的话，那么就需要使用上面的命令来操作，指定要撤销的ccommitId,该命令会保留当前改动并撤销指定提交后的所有commit记录，如果不指定ID的话可以使用HEAD~`{num}` 来选择最近`{num}`条提交
+```
+git reset --soft HEAD~2 #合并最近两条提交
+git commit -m 'feat: add new feat'
+```
+>带 `--soft` 参数的区别在于把改动内容添加到暂存区 相当于执行了`git add .`
+
+### git rebase -i
+
+`git rebase`的功能会更加强大，如果我想修改最近3条提交记录，执行
+``` bash
+git rebase -i  HEAD~3
+```
+会出现如下编辑器界面(vim编辑器):
+
+
+![](https://img14.360buyimg.com/imagetools/jfs/t1/146374/23/7928/299480/5f5994e4E612057a2/96c528644441ab76.png)
+
+上面显示的是我最近3条提交信息 ，下面是命令说明，
+修改方式就是将commit信息前的`pick`改为你需要的命令，然后退出`:wq`保存
+
+下面是常用的命令说明：
+```
+p,pick = 使用提交
+r,reword = 使用提交，但修改提交说明
+e,edit = 使用提交，退出后使用git commit --amend 修改
+s,squash = 使用提交，合并前一个提交
+f,fixup = 和squash相同，但丢弃提交说明日志
+d,drop = 删除提交，丢弃提交记录
+```
+
+## 最后
+文本主要介绍了如何规范`git commit`和自动语义化版本管理，以及如何修改`git commit`,遵循一个规范其实没比之前随意填写信息增加多少工作量，但依赖规范却可以实现更多提升效率的事情。
+
+## 参考
+* [conventional commits](https://www.conventionalcommits.org/zh-hans/v1.0.0-beta.4)
+
+* [standard version](https://github.com/conventional-changelog/standard-version)
+
+* [semver.org](https://semver.org/lang/zh-CN/)
+
+* [Semver(语义化版本号)扫盲](https://juejin.im/post/6844903591690534926)
+
diff --git a/source/_posts/2020-09-25-taro-vue3.md b/source/_posts/2020-09-25-taro-vue3.md
new file mode 100644
index 0000000000..6bdc0ca2ba
--- /dev/null
+++ b/source/_posts/2020-09-25-taro-vue3.md
@@ -0,0 +1,410 @@
+title: 使用 Vue3 开发小程序
+subtitle: Vue3的新特性主要有 Composition API、Teleport、Fragments 等。我们是否也可以在小程序开发中使用这些特性呢？
+cover: https://img14.360buyimg.com/ling/jfs/t1/114796/40/19245/125315/5f715516E5765ae26/2375d621a3c73e76.png
+category: 小程序
+tags: 
+    - Vue3
+    - Taro3
+    - Taro
+    - 小程序
+author:
+    nick: lillian
+date: 2020-09-28 09:00:00
+---
+
+## 前言
+
+9 月 19 日凌晨，Vue3 在经过多个开发版本的迭代后，终于迎来了它的正式版本，"One Piece" 的代号也昭示了其开拓伟大航路的野心。
+
+Vue3的新特性主要有 Composition API、Teleport、Fragments 和 `<script setup />` & `<style vars />` 等。我们是否也可以在小程序开发中使用这些特性呢？在 Taro 的文档里我们找到了[关于 Vue3 的章节](https://taro-docs.jd.com/taro/docs/vue3)，事不宜迟，让我们开始尝试吧。
+
+## Vue3 部分新特性
+
+还没了解过 Vue3 的同学也别急，先了解下Vue3的新特性吧：
+
+### 1.Composition API
+
+Vue2.X 基于 Option API（选项API）构建组件，一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式，好处是各属性内容分离开，对于新手来说比较友好；但对于大型项目来说，为了修改某个功能，可能需要在一个文件中来回翻页。Vue3 增加了 Composition API 方式（组合 API ），基于 reactivity（响应式）的思想进行组件构建，将逻辑封装到函数中，可以实现类似ReactHooks 的逻辑组合和重用。对于大型项目，代码按照具体功能划分，而不是分散在不同的生命周期中，逻辑更加一目了然。
+
+![图片](https://uploader.shimo.im/f/H3f9IZwZpnsMdPhg.png!thumbnail)
+
+### 2.Teleport（传入）
+
+Teleport功能，使得我们可以将全屏的组件（例如Toast）移到Vue APP节点外，而不需要在UI界面上修改其他组件样式，方便实现全屏蒙层、浮层弹窗等效果。
+
+### 3.Fragments（碎片）
+
+Vue2.x版本中，`<template />` 标签下不支持放置多个组件，这个限制在Vue3中不再存在。这点比较好理解，下述组件设计在Vue3中是没有问题的：
+
+```plain
+<!-- Layout.vue -->
+<template>
+  <header>...</header>
+  <main v-bind="$attrs">...</main>
+  <footer>...</footer>
+</template>
+```
+
+### 4.实验性质的语法糖 `<script setup>、<style vars>`
+
+a.`<script setup>`:用于在 SFC 中使用 Composition API 的语法糖，改善在单个文件组件中使用Composition API时的体验。
+
+b.`<style vars>`: SFC 中状态驱动的 CSS 变量，它提供了直接的CSS配置和封装，支持将组件状态驱动的CSS变量注入到“单个文件组件”样式中。
+
+除了以上 4 点之外，Vue3 还提供了自定义渲染，详细可以参考文末的推荐阅读文章。
+
+## 如何在 Taro 里使用 Vue3
+
+Vue3 带来的新特性可以让我们更加优雅和高效地进行开发，现在，来开启我们在 Taro 里使用 Vue3 的体验之旅吧。
+
+Taro 已经默认安装 Taro3 ，所以正常安装即可：
+
+```plain
+# 使用 npm 安装 CLI
+$ npm install -g @tarojs/cli
+# OR 使用 yarn 安装 CLI
+$ yarn global add @tarojs/cli
+# OR 安装了 cnpm，使用 cnpm 安装 CLI
+$ cnpm install -g @tarojs/cli
+```
+安装完成之后，使用`taro --version`查看一下是否安装成功，如果输出版本号说明安装成功。
+安装成功后，初始化一个项目
+
+```plain
+$ taro init
+```
+将出现如下图的一些选型
+![图片](https://uploader.shimo.im/f/QfwAArJtITPvi3gV.png!thumbnail)
+
+如上图：
+
+1. 请输入项目名称？输入项目名称`vuedemo`
+2. 请输入项目介绍？输入项目介绍`a demo project`
+3. 请选择框架？当然是`Vue3`啦
+4. 余下选项，如上面 3 个选项，根据自己的需要选择就好，不会有什么问题
+
+一般情况下，依照提示选型好以后， Taro会自动安装依赖。如果由于网络问题导致安装不成功，就需要手动在项目路径下进行安装。
+
+```plain
+# 使用 yarn 安装依赖
+$ yarn
+# OR 使用 cnpm 安装依赖
+$ cnpm install
+# OR 使用 npm 安装依赖
+$ npm install
+```
+安装后目录结构：
+![图片](https://uploader.shimo.im/f/biP5hrZFvyv8SJg5.png!thumbnail)
+
+`app`默认代码如下，我们注意到，Taro3 在新建 Vue3 项目时已经修改了入口组件写法。
+
+```plain
+import { createApp } from 'vue'
+import './app.scss'
+const App = createApp({
+  onShow (options) {},
+  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
+})
+export default App
+```
+`page/index`目录下`index`文件示例如下：
+```plain
+<template>
+  <view class="index">
+    <text>{{ msg }}</text>
+  </view>
+</template>
+<script>
+import { ref } from 'vue'
+import './index.scss'
+export default {
+  setup () {
+    const msg = ref('Hello world')
+    return {
+      msg
+    }
+  }
+}
+</script>
+```
+编译运行微信小程序
+```plain
+npm run dev:weapp
+```
+编译后，打开微信开发者工具导入编译后的`dist`目录，首页内容和编译成 H5的表现都如下图：
+![图片](https://uploader.shimo.im/f/pzxlgUkWCEgGpvdC.png!thumbnail)
+
+## 验证Taro3对Vue3的支持度
+
+### Composition API
+
+写个比较简单的 todolist 计数组件，假设目前已有 4 项代办事项，点击后将新增一项。这里会使用到Composition API 思路，以及 computed计算属性。
+
+在用户点击时，第二行“当前操作新增”会根据点击次数递增，总计条数会在 4的基础上累加。
+
+```plain
+<template>
+  <button @tap="increment">
+    增加 1
+  </button>
+  <view>当前todolist事项已有：{{ existCount }}条；</view>
+  <view>当前操作已新增：{{ count }} ，共有{{ total }}条。</view>
+</template>
+<script>
+import { ref, computed, onMounted, toRefs, watch } from 'vue'
+export default {
+  name: 'case1',
+  setup(props) {
+    // ref响应式变量
+    const count = ref(0)
+    const existCount = ref(4)
+    // computed方法，在count的value发生改变时，会触发计算total
+    const total = computed(() => count.value + existCount.value )
+    function increment() {
+      count.value++
+    }
+    
+    onMounted(() => console.log('component mounted!'))
+    
+    return {
+      // 返回increment方法，existCount、count、total属性，供模板中调用
+      increment,
+      existCount,
+      count,
+      total,
+    }
+  }
+}
+</script>
+```
+页面表现如下所示，可见对于 Composition API 的支持的还是不错的。
+
+![todo计数](https://img14.360buyimg.com/imagetools/jfs/t1/122176/18/13461/1349845/5f6c5d14Eaffd062c/f36c7a7279f8aac6.gif)
+
+### Teleport
+
+写个初次登录用户的欢迎弹窗。用户名从`index.vue`传入。首页代码如下：
+
+```plain
+<template>
+  <view class="index">
+    <Toast :user = username />
+    <view id="teleportToast"></view>
+  </view>
+</template>
+```
+在 Toast.vue 中，我们会写个属性 to 为 teleportToast 的 Teleport 组件，代码如下：
+```plain
+<template>
+  <button @tap="showToast" class="btn">打开弹窗</button>  
+  <!-- to和index.html中的view id一致 -->
+  <teleport to="#teleportToast">
+    <view v-if="toastFlag" class="toast__wrap"  @tap="hideToast">
+      <view class="h2">弹窗标题：</view>
+      <view class="toast__wrap--msg">欢迎{{ user }}，点击关闭</view>
+    </view>
+  </teleport>
+</template>
+<script>
+import { ref,toRefs } from 'vue';
+export default {
+  props:{
+    user: {type: String}
+  },
+  setup(props) {
+    // 获取用户名
+    const { user } = toRefs(props)
+    // Toast：显示flag
+    const toastFlag = ref(false)
+    let timer
+    const showToast = ()=>{
+      toastFlag.value = true
+    }
+    const hideToast = ()=>{
+      toastFlag.value = false
+    }
+    return {
+      user,
+      toastFlag,
+      showToast,
+      hideToast,
+    }
+  }
+}
+</script>
+<style lang="scss">
+.toast__wrap{
+  position: fixed;
+  width:100%;
+  height: 100%;
+  background: rgba(0,0,0,.8);
+  top: 0;
+  left: 0;
+  z-index: 101;
+  color: #fff;
+  .h2{
+    margin: 20px;
+  }
+  &--msg{
+    text-align: center;
+  }
+}
+</style>
+```
+在 H5 下是正常显示的，弹窗展示以及关闭功能效果如下；在小程序上却报错了，Taro 团队还需要加把劲：
+
+![Teleport](https://img10.360buyimg.com/imagetools/jfs/t1/111884/14/18645/2307115/5f6c6e91E963e9fcc/0b7230301e9d2e0a.gif)
+
+### Fragments
+
+Fragments 特性已经在上面的例子中得到验证，使用没有问题。
+
+### script setup 语法糖
+
+我们尝试一下`<script setup>`，组件里的代码如下：
+
+```plain
+<template>
+  <view>
+    <view>count:{{ count }},msg:{{ info }}</view>
+    <button @tap="incAndChangeInfo">
+      增加 1修改msg
+    </button>
+  </view>
+</template>
+<script setup=" props ">
+  import { ref, toRefs } from 'vue'
+  export default{
+    props: {
+      msg: String,
+    },
+  }
+  export const count = ref(0)
+  export const info = ref(props.msg)
+  export const incAndChangeInfo = () => {
+    count.value++
+    info.value = "change hello" + count.value
+  }
+</script>
+```
+上述`script`标签里的代码效果等同于下面：
+```plain
+<script>
+import { ref, toRefs } from 'vue'
+export default {
+  props: {
+    msg: String,
+    },
+  setup(props) {
+  const count = ref(0)
+  const info = ref(props.msg)
+  const incAndChangeInfo = () => {
+    count.value++
+    info.value = "change hello" + count.value
+    }
+  return {
+    count,
+    info,
+    incAndChangeInfo,
+    }
+  }
+}
+</script>
+```
+调用它的代码传入 mgs 如下：
+```plain
+<Setup msg="hello"/>
+```
+运行后，小程序和 H5 都是支持的，页面整体表现如下：
+
+![script setup 语法糖](https://img10.360buyimg.com/imagetools/jfs/t1/132702/4/11153/1478203/5f705361E4db3e0cc/d32765423246de84.gif)
+
+可以看到，运用新特性进行开发，代码书写更加便捷，逻辑更清晰。
+
+### style vars 语法糖
+
+`<style vars>`，组件里的代码如下：
+
+```plain
+<template>
+  <view class="text">文字颜色为{{ color }},点击后变为红色</view>
+</template>
+<script>
+import { ref,toRefs } from 'vue'
+export default {
+  props:{
+    color: {type: String}
+  },
+   data(props) {
+    return {
+      color: ref(props) //'red'
+    }
+  },
+  setup(props){
+    const { color } = toRefs(props)
+    return {
+      color,
+    }
+  }
+}
+</script>
+<style vars="{ color }">
+.text {
+  color: var(--color);
+}
+</style>
+```
+调用它的页面里的代码如下：
+```plain
+<template>
+  <view class="index">
+    <Styledemo :color = color @tap="changeColor"/>
+  </view>
+</template>
+<script>
+import { ref, computed, onMounted, toRefs, watch } from 'vue'
+import Styledemo from "@/floors/styledemo"
+export default {
+  components:{
+    Styledemo
+  },
+  setup () {
+    const color = ref('blue')
+    const changeColor = ()=>{
+      color.value = 'red'
+    }
+    return {
+      changeColor,
+      color
+    }
+  }
+}
+</script>
+```
+小程序和 H5 都没有问题，功能效果如下：
+
+![style vars 语法糖](https://img11.360buyimg.com/imagetools/jfs/t1/146777/39/9447/1836911/5f702d5eE52e470f9/dea5082ff993a478.gif)
+
+## 结语
+
+我们将上述几个Demo 整合在一个项目中，放在[Github](https://github.com/lillian98/vue3)上，有兴趣的同学可以看看。在线预览地址在[这里](https://lillian98.github.io/vue3/dist/#/pages/index/index)。
+
+经过验证，Taro3 支持使用最新的Vue3开发多端应用，相比之下H5的支持度更好一些。
+
+值得一提的是，Taro 团队在技术上一直保持进取，在Taro2.0 版本支持了ReactHooks；根据[Taro RFCS](https://github.com/NervJS/taro-rfcs/blob/master/rfcs/0001-vue-3-support.md)，早在`2020-06-03`也已经打算支持Vue3 了。截至目前，Taro 对 Vue3 的支持在小程序端的稍有补足，希望 Taro 团队可以早日补足这个短板。
+
+推荐文章：
+
+* [Vue3和React ](https://zhuanlan.zhihu.com/p/133819602)[H](https://zhuanlan.zhihu.com/p/133819602)[ooks对比](https://zhuanlan.zhihu.com/p/133819602)
+* [SWR](https://github.com/vercel/swr)
+* [自定义渲染器的应用](http://hcysun.me/vue-design/zh/renderer-advanced.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93%E5%99%A8%E7%9A%84%E5%BA%94%E7%94%A8)
+
+参考文章：
+
+* [1][Compsition API](https://v3.cn.vuejs.org/guide/composition-api-introduction.html)
+* [2][Teleport](https://v3.cn.vuejs.org/guide/teleport.html#%E4%B8%8E-vue-components-%E4%B8%8E-vue-components-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8)
+* [3]`<script setup>`
+* [4]`<style vars>`
+* [5][Taro3安装及使用](https://taro-docs.jd.com/taro/docs/GETTING-STARTED)
+## 
+
diff --git a/source/_posts/2020-12-10-border-image-svg-animation.md b/source/_posts/2020-12-10-border-image-svg-animation.md
new file mode 100644
index 0000000000..c10dc4fff8
--- /dev/null
+++ b/source/_posts/2020-12-10-border-image-svg-animation.md
@@ -0,0 +1,201 @@
+title: 使用border-img和SVG制作有趣的边框特效
+subtitle:
+cover: https://img12.360buyimg.com/imagetools/jfs/t1/146532/24/17935/284587/5fd20b60Efa935641/cd945128fecce28a.jpg
+category: 经验分享
+tags: 
+    - border-image
+    - CSS3
+    - SVG
+    - 动画
+    - 特效
+author:
+    nick: 大坑
+date: 2020-12-10 19:00:00
+---
+
+## 引言
+
+我们都知道border-image可以使用图片、渐变或者SVG来替代原始的边框，来实现原本单调的效果。但是有些时候，需求方或者设计师同学依然无法满足，想给边框加点动画什么的，按照以往的做法，我们会推荐他们用gif来给容器添加背景以实现这个效果，可是一旦容器尺寸发生改变，gif本身就带着很多“狗牙齿”，实际效果非常差，无法达到预期。
+
+而这个时候，SVG的优势就特别凸显了，SVG可以实现动画，又是矢量图形，并且能作为资源替代图片，我们使用SVG本身的动画，配合border-image的特性，就可以实现一些以往不好实现的效果。
+
+## 要实现的效果
+![](http://storage.360buyimg.com/sourse/QQ20201210-160454-HD.gif?Expires=3755073363&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=9LFBz8BOjm8GKmfWRJiLMDLmStY%3D)
+
+啊，这...看到效果时，首先想到的是是否能用gif，但是正如前面我们所说的，一旦容器的尺寸发生改变，那么gif就不适应了，会被拉伸或者扭曲，且大家看图片，狗牙齿很严重，肯定不行。
+
+## 我们可以使用background吗？
+
+首先，一开始我们并没有想到 `border-image`，因为我首先想到的是使用 `background`，然后利用 `background-position` 配合 `animation` 来解决这个问题，于是我写了个demo：
+
+![](http://storage.360buyimg.com/sourse/2.gif?Expires=3755078890&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=iBK0XqX9eCVAUJuHyF4tQAhGuZ4%3D)
+
+我使用了 `:before` 配合 `animation` 来实现了这个效果，但是，这样的话，要实现我们上面的效果，必须用很多个元素来拼接，而且经过实践，4个角无法流畅衔接，最终无法达到我们需要的效果。
+
+于是我去google了一下有没有类似的解决方案，在国外的博客有人提示可以试试 `border-image`，利用图片，来实现这个效果。
+
+## Border-Image
+
+`border-image` 类似 `background-image`，只不过渲染的区域是最外围的border区域，具体如何使用相信大家都已经了解了，当然，如果你还没有用过，可以通过 [border-image 的正确用法](https://aotu.io/notes/2016/11/02/border-image/index.html) 这篇文章复习下，这里就不赘述了。
+
+看过文章，我们可以知道，如果使用 `border-image`，我们不得不提供一张九宫格的图片，九宫格的每个角，代表了容器的4条边和4个角（中间区域可以忽略）。按照我们的需求，我们做了一个图：
+
+![](http://storage.360buyimg.com/sourse/3.png?Expires=3755078169&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=1mIzELrE1ECmpNr9P%2BJD0EYBbSI%3D)
+
+然后我们使用 `border-image` 将这张图加载到边框上：
+
+![](http://storage.360buyimg.com/sourse/4.png?Expires=3755078128&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=BOyLZY68r%2BGRugl8XnnRqw8c2VU%3D)
+
+代码如下：
+
+```
+.demo {
+  border-image: url(bg.png) 30px round;
+}
+```
+
+嗯，看起来不错，辣么问题来了，怎么让他动起来呢？
+
+## SVG登场
+
+众所周知，SVG也算图片，并且可以在内部实现动画，刚好契合我们的需求，根据这个特性，我们将上述图片改造成了一个九宫格的SVG文件，代码如下：
+
+```
+<svg version="1.1" height="90" width="90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="round" cx="16" cy="10" r="10" fill="red"/>
+    </defs>
+    <use href="#round" x="0" y="0" />
+    <use href="#round" x="30" y="0" />
+    <use href="#round" x="60" y="0" />
+    <use href="#round" x="0" y="30" />
+    <use href="#round" x="0" y="60" />
+    <use href="#round" x="30" y="60" />
+    <use href="#round" x="60" y="60" />
+    <use href="#round" x="60" y="30" />
+</svg>
+```
+
+更改引用
+
+```
+border-image: url(round.svg) 30 / 30px round;
+```
+
+刷新，效果出来了
+
+嗯，还缺点动画，我们的思路是为边界图像的每个区域创建一个不同的动画。例如，在左上角，我们有一个圆从右到左，而第二个圆则同时从上到下。
+
+我们将为所有的 `use` 的 `transform` 属性设置动画。我们还将利用SVG的特性来避免对每个头骨重复冗长的定义:
+
+```
+@keyframes down {to {transform: translate(0, 30px)}}
+
+<use href="#round" x="0" y="0" style="animation: down .4s infinite linear" />
+```
+
+以此类推，根据4个边，制作4个角的动画：
+
+```
+@keyframes left {to {transform: translate(-30px, 0)}}
+@keyframes down {to {transform: translate(0, 30px)}}
+@keyframes right {to {transform: translate(30px, 0)}}
+@keyframes up {to {transform: translate(0, -30px)}}
+```
+
+应用，保存，刷新
+
+yes, it works!
+
+[点击查看效果](https://codepen.io/larthas/full/YzGGowK)
+
+## 我能玩这个玩一整天！
+
+虽然我们实现了效果，但是我在研究的过程当中，我想起来用SVG替代GIF的原因：能够非常方便的通过修改代码来修改动画的表现，并且能够作为图片进行渲染，更不用说更小的体积，尤其是处理渐变的时候，最最重要的是，他无论怎么缩放，都能表现如初，甚至，还能改变颜色！
+
+想到这一点，我尝试继续改造这个动画的效果，我给圆加上了渐变：
+
+```
+@keyframes color {to {fill: green}}
+
+use { fill: red; animation: .4s infinite ease, color 1s infinite linear alternate;}
+
+<use href="#round" x="0" y="0"  style="animation-name: down, color"/>
+```
+
+保存，刷新，效果如下：
+
+![](http://storage.360buyimg.com/sourse/5.gif?Expires=3755082554&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=DTzHjRUTb3Nch%2FveCgy3g1RcEgI%3D)
+
+哇哦，感觉还行哦。但是，这还不够，我还可以玩！
+
+刚才说了，SVG最大的优势就是自由，可以自由的更换颜色、尺寸，辣么，元素我也可以换呀，于是我把圆形换成了箭头。
+
+```
+<defs>
+  <polygon id="arrow" fill="red" transform="translate(9.000000, 15.000000) rotate(270.000000) translate(-9.000000, -15.000000) " points="9 6 24 24 -6 24"></polygon>
+</defs>
+```
+
+效果如下
+
+![](http://storage.360buyimg.com/sourse/6.gif?Expires=3755082846&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=tVt4C4mur33kNOSbsYuqGUP%2BRYQ%3D)
+
+嘿，有点意思，不过好像哪里不对，箭头的方向不对，既然可以换元素、颜色、尺寸，那方向也能换！小意思，上！
+
+```
+@keyframes left {to {transform: translate(-32px, 0)}}
+@keyframes down {to {transform: translate(0, 32px) rotate(-90deg)}}
+@keyframes right {to {transform: translate(32px, 0) rotate(180deg)}}
+@keyframes up {to {transform: translate(0, -32px) rotate(90deg)}}
+```
+
+同时，SVG文件也必须改造一下，SVG的4条边的元素本身的位置和动画都得修改，具体SVG整体代码如下：
+
+```
+<defs>
+    <polygon id="arrow" transform="translate(9.000000, 15.000000) rotate(270.000000) translate(-9.000000, -15.000000) " points="9 6 24 24 -6 24"></polygon>
+  </defs>
+  <use href="#arrow" x="96" y="0" style="animation-name: left, color"/>
+  <use href="#arrow" x="64" y="0" style="animation-name: left, color"/>
+  <use href="#arrow" x="32" y="0" style="animation-name: left, color"/>
+
+  <use href="#arrow" x="0" y="0" style="animation-name: down, color; transform: rotate(-90deg); transform-origin: 16px 16px"/>
+  <use href="#arrow" x="0" y="32" style="animation-name: down, color; transform: rotate(-90deg); transform-origin: 16px 48px"/>
+  <use href="#arrow" x="0" y="64" style="animation-name: down, color; transform: rotate(-90deg); transform-origin: 16px 80px"/>
+
+  <use href="#arrow" x="0" y="226" style="animation-name: right, color; transform: rotate(180deg); transform-origin: 16px 176px;"/>
+  <use href="#arrow" x="32" y="226" style="animation-name: right, color; transform: rotate(180deg); transform-origin: 48px 176px;"/>
+  <use href="#arrow" x="64" y="226" style="animation-name: right, color; transform: rotate(180deg); transform-origin: 80px 176px;"/>
+
+  <use href="#arrow" x="160" y="160" style="animation-name: up, color; transform: rotate(90deg); transform-origin: 176px 112px"/>
+  <use href="#arrow" x="160" y="128" style="animation-name: up, color; transform: rotate(90deg); transform-origin: 176px 80px"/>
+  <use href="#arrow" x="160" y="96" style="animation-name: up, color; transform: rotate(90deg); transform-origin: 176px 48px"/>
+```
+
+每条边3个 `use` 元素，每个元素动画要写好，最后我们保存，刷新，效果如何呢？
+
+![](http://storage.360buyimg.com/sourse/7.gif?Expires=3755083245&AccessKey=PoTZSCrI5Z0Ul1TD&Signature=aKBCQAUVPeoYUDBeOaOtkq2b0dE%3D)
+
+看起来不错哦，我们还可以将箭头换成你要的任何元素，并且定制自己要的动画。
+
+## 总结
+
+### 优势
+
++ `border-image` 能够实现以往单调的线段边框所不能实现的效果，可以扩展页面的展示内容
++ SVG非常自由，我们能够定制元素的 `颜色`、`尺寸`、`动画` 等很多内容，相比GIF每次都得打开PS进行编辑，或者找设计师重新制作，简直不要太省事
++ SVG能够替代图片作为页面资源进行引用，并且体积非常小，就类似我们用的SVG图标字体，在非常高清的同时，还能够提高页面性能
+
+### 缺点
+
++ `border-image` 在一些浏览器还是不够支持，不过目前大部分移动端都已经支持，在使用时要稍微注意
++ `border-image` 对图片或者SVG的内容栅格是有要求的，使用的时候，要注意对每条边框的设计进行详细测试
++ `SVG` 编辑起来还是有点难度和工作量的，有时候元素复杂的时候，挺费时间
++ 虽然容器尺寸改变，`border-image` 能够扩展，但是有些地方还是会露馅，需要进行微调
+
+## 参考文献
+
+* [border-image 的正确用法](https://aotu.io/notes/2016/11/02/border-image/index.html)
+
+