靡不有初鲜克有终,慎终如始则无败事,共勉之
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()、debugger、console.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/…