Vue3 组件化开发(3)

315 阅读2分钟

「这是我参与2022首次更文挑战的第23天,活动详情查看:2022首次更文挑战」。

导入组件时添加 .vue 后缀名的说明

前面提到,导入 .vue 文件时,可以不写 .vue 后缀。但是,不写 .vue 后缀可能会存在没有代码提示的问题(可能 VS Code 还不够智能),而且按住 Ctrl 键点击这个文件路径也不会跳转到该文件中:

导入 .vue 文件时不加后缀

而当我们加上 .vue 后缀后:

导入 .vue 文件时加后缀

可以看到,写上 .vue 后缀后在使用该组件时就有代码提示了,而且按住 Ctrl 键(Mac 电脑是 Command 键)点击这个文件路径也可以跳转到该文件中了。

所以,推荐大家在开发中,特别是使用 VS Code 开发时,导入 .vue 文件时,把 .vue 这一后缀也加上。

Vetur 扩展的自动导入配置说明

Vetur 扩展其实是可以进行一些配置的:

image-20211225140450657

image-20211225140539274

默认情况下,Vetur 会开启自动导入的功能(也就是说上图中红框中的内容默认会勾选上),好处如下:

Vetur 插件的自动导入功能

而原来的时候,如果我们想要在 Main.vue 中使用 MainBanner.vue,就需要先导入 MainBanner.vue,再注册 MainBanner 组件,最后使用 MainBanner 组件,总共需要 3 步手动操作。而触发 Vetur 插件默认开启的自动导入功能只需要使用 MainBanner 组件(需要通过字母全部小写+短横线连接的格式触发)这一步操作就能帮我们自动完成导入和注册组件这两步操作(当然,格式可能有点问题,后面我们会通过自动格式化代码解决这个问题)。

虽然 Vetur 插件的这个自动导入功能看起来很好用,但我个人不喜欢用它,原因如下:

  1. 如果不使用某些格式化插件,这个自动导入功能导入和注册的代码格式会有点乱,甚至有时候生成代码的位置是错误的,还得自己手动修改;
  2. 个人喜欢对自己导入的东西按一定的顺序导入,方便后续查找某个东西的导入位置,而这个自动导入功能导入的东西的顺序有可能是乱的,后续可能不方便找某个东西的导入位置;

因此,我这里关闭了(取消勾选)Vetur 的这个自动导入功能。之后,我们用到哪个组件时,就自己来导入并注册,最后再来使用。