从 Vue2 升级到 Vue3，很多语法和特性发生了改变，但是我们不仅要知道写法上的不同，还要究其背后的原因。做到知其然，知其所以然。
我们在看到下面这些 标题的时候，不妨先自己想想，然后再展开里面具体的原因分析，也帮你回顾下自己的知识掌握的是否全面。
其实本质上 Vue3 每个组件还是有一个根节点，因为 DOM 树只能是树状结构的，只是 Vue3 在编译阶段新增了判断，如果当前组件不只一个根元素，就添加一个 fragment 组件作为最外层组件将其
的包裹起来，相当于这个组件还是只有一个根节点。而 fragment 跟 keep-alive 一样是一个不会被渲染出来的内置组件。
网页中 <a> 标签是带有如下这样一个下划线的样式，我们也可以通过 text-decoration 属性去设置成别的样式。
而我们今天要讨论的下划线动画，是无法直接通过哪个 CSS 属性设置的。我们只能通过伪造的方式模拟出一个下划线的效果。
首先我们将 <a> 标签的默认下划线去掉，然后将鼠标 hover 后的字体颜色保持一致。
一个树状结构的视图可以仅仅由 HTML 和 CSS 代码来实现而不用借助 JavaScript。网页的无障碍访问功能会将树状视图视为嵌套的并包含其它组件内容的列表，并且自动支持标准键盘交互。
首先添加如下的嵌套的列表结构代码：
开发中为了提升网页的可用性，在网页中检测键盘大小写键 caps lock 开启状态很有必要，尤其在输入密码的时候，我们并不能看见输入的字符是什么，如果是由于大小写错误我们并不能第一时间感知到。
如下实例演示，当我们在密码输入框中输入内容时，如果我们的大小写键是开启的状态，就会得到“Caps lock is on”这样的提示信息。
随着前端工程化的应用越来越广，插件和包的管理也逐渐衍生出很多的管理器，常见的几种包管理器如：npm、cnpm、yarn、pnpm，那你知道这些管理器之间有哪些区别吗？我们一起来逐个认识下它们：
npm 是 Node.js 自带的包管理器，平时通过 npm install 命令来安装各种 npm 包（比如：npm install vue-router ），就是通过这个包管理器来安装的。
关于 npm 包 下载镜像源的设置：
# 查看下载源
npm config get registry
# 绑定下载源
npm config set registry https://registry.npmmirror.com
# 删除下载源
npm config rm registry
npm 的 包的版本锁定文件是 package-lock.json ，如果有管理多人协作仓库的需求，可以根据实际情况把它添加至 .gitignore 文件，便于统一团队的包管理。