Hik 前端周刊|第 2 期

avatar
@杭州海康威视数字技术股份有限公司

靡不有初鲜克有终,慎终如始则无败事,共勉之

vue3.0

1.利用 vite 快速搭建 vue3 组件库
juejin.cn/post/689183…

vite-components-playground 是一款开箱即用的 vue3 组件库,包含文档,打包,测试,部署,换肤,图标等一整套解决方案,内部使用全部是开源的工具;只需要 clone 项目就可以在上面做自己的组件库了。

2.Vue 3.0 Ref-sugar 提案真的是自寻死路吗?
zhuanlan.zhihu.com/p/287842109…

setup suger

<script setup>
// imported components are also directly usable in template
import Foo from "./Foo.vue";
import { ref } from "vue";

// write Composition API code just like in a normal setup()
// but no need to manually return everything
const count = ref(0);
const inc = () => {
  count.value++;
};
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

ref-sugar 提案:

<script setup>
import Foo from "./Foo.vue";

// declaring a variable that compiles to a ref
ref: count = 1;
const inc = () => {
  count++;
};
// access the raw ref object by prefixing with $
console.log($count.value);
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

规范不是唯一权威来源,标准和规范往往滞后于实践同时也存在落后于时代的部分。而挑战权威是需要付出代价的,因为在开发者心里 框架 <= 语言,只有极少数的团队,愿意去尝试从根本改变或者改善现状,Vue Ref-sugar 并不一定是正确的产物,但是需要被尊重。

3.利用动画让大家更好的理解 Vue3 的 Composition Api
juejin.cn/post/689054…

经验文章

1.知乎部署系统演进
mp.weixin.qq.com/s?__..

2.使用这些 console.log()技巧来升级您的 JavaScript 浏览器日志
dev.to/ackshaey/le…

大部分的前端开发还在使用 console.log(),本文还介绍了调试的其他一些用法,如:console.table()console.trace()debuggerconsole.time(id)console.timeEnd(id),还有 cosnole.log() 的多种用法,打印出更多的样式;以及开发者工具的一些操作姿势;配图很全。

小工具 & 插件 & 类库

1.Tailwind CSS -- vscode 插件 tailwindcss-intellisense
github.com/tailwindlab…

面向 Visual Studio 代码的智能化 Tailwind CSS 工具。 通过为 Visual Studio Code 用户提供高级功能,如自动补全功能、语法突显和 lint 功能,从而增强了 Tailwind 开发体验。

  • Autocomplete: 自动补全类名,CSS 函数和指令
  • Linting: 高亮显示 CSS 和标记中的错误或者潜在的错误
  • Hover Previews: 鼠标悬浮查看完整的 CSS 定义
  • Syntax Highlighting: 语法高亮

2.通用 rollup 插件,支持 PostCSS, Sass, Less, Stylus 等
github.com/Anidetrix/r…

3.tsParticles codepan 样例库
codepen.io/collection/…