Hik 前端周刊｜第 22 期

好文与学习

1. vue3 有可能支持 vue2 编译后的组件
twitter.com/youyuxi/sta…

2. 新一代构建工具的比较
css-tricks.com/comparing-t…

3. MDH(make developer happier) 云谦 发起的前端咨询项目
fe-cool.github.io/news/

4. vue 历届项目的代号
github.com/egoist/alwa…

vue 3.0 是 one-piece，其实每个 vue 的 minor 和 major 版本都有一个对应的动画的代号名称

5. Chrome 90 发布
developer.chrome.com/blog/new-in…

新技术 Shadow DOM、CSS 容器查询

6. 新时代布局中一些有意思的特性
github.com/chokcoco/iC…

flex 布局中的 gap 属性；控制容器宽高比属性 aspect-ratio；firefox 下的 CSS Grid 瀑布流布局（grid-template-rows: masonry）；CSS 容器查询（Container Queries）

7. 利用 text-to-chart 的一些在线工具
xosh.org/text-to-dia…

工具与类库

1. vite-plugin-vue-gql 可以在 vue 文件编写 graphql
github.com/wheatjs/vit…

<script setup lang="ts">
import { useQuery } from "vql";

const { data } = useQuery();
</script>

<template>
  <h1>{{ data.hello }}</h1>
</template>

<gql>
{
  hello
}
</gql>
复制代码

分析 esbuild、snowpack、vite、wmr 构建工具背后的设计思想，原理。以及对比功能点差异与包的大小

2. 2 款工作流的工具，react-flow

github.com/wbkd/react-…；flowkit：github.com/egoist/flow…

3. 基于 react、material、tailwind 开发的组件库 material-tailwind
material-tailwind.com/

4. 一款交互感比较好的 vue-datetime
github.com/mariomka/vu…