🎯 探索 Vue 组件自动导入的奥秘
深入 unplugin-vue-components 源码，揭开自动导入的实现原理

在 Vue 项目开发中，我们经常会使用 unplugin-vue-components 这个插件来自动引入组件，告别繁琐的手动 import 操作。

🤔 但你是否好奇过它是如何实现的？

让我们一起拆解一下源码（以 Vite 为例），看看这个"魔法"背后的技术原理～

一些脚手架基础配置 ​

• vscode settings
• eslint -v9
• eslint -nuxt -v9
• commitlint
• husky
• lint-staged
• 自定义eslint 规则

概念 ​

微前端是一种架构风格，它将一个大型的前端应用拆分成多个独立的微应用，这些微应用可以独立开发、部署和维护。微前端的目标是将一个复杂的前端应用拆分成多个小的、可独立开发和部署的应用，从而提高开发效率和应用的可维护性。

在实际场景中，我们常常需要再当前主应用，嵌入某个子应用，就不必自己开发，子应用可能有别的业务部门开发，技术栈亦不一致。

大纲 ​

• pnpm 特点（幽灵依赖，磁盘复用，软硬链接）
• workspace
• changeset
• monorepo 打包
• catalog
• 常用命令

css 3d ​

api ​

transform-style ​

声明 3D 空间，一般作用在容器盒子上

rotate[XYZ]时，正值为顺时针，负值为逆时针；左手定则。

TinyMCE三种模式 ​

1. 经典模式：基于iframe的沙箱模式，总是显示操作栏且拥有大量的操作按钮；样式上并非所见即所得（iframe的原因），更适合展示性要求不高的场景，比如表单项。
2. 内联模式：基于普通块元素为容器（div），实现阅读视图和编辑视图的合并，所见及所得，不总是显示菜单栏；更适合展示性较强的场景，比如文章内容。
3. 无干扰模式，似乎只是比内联模式少了菜单栏，使用上下文菜单，操作更加的轻巧（maybe）。

install & setup ​

npm i tinymce

概述 ​

View Transitions Api View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。 ps:不同dom之间的视图过渡

常见的过渡/动画创建方式 ​

1. transition/keyframes （ 补间动画，帧动画 ）
2. requestAnimationFrame （ js 动画，每帧回调 ）
3. Web Animation Api（ 和css动画一样在合成层渲染，js更好的干预和控制 ）
4. View Transitions Api （ 两个视图或者dom之间的过渡 ）