「这是我参与2022首次更文挑战的第23天,活动详情查看:2022首次更文挑战」。
导入组件时添加 .vue
后缀名的说明
前面提到,导入 .vue
文件时,可以不写 .vue
后缀。但是,不写 .vue
后缀可能会存在没有代码提示的问题(可能 VS Code
还不够智能),而且按住 Ctrl
键点击这个文件路径也不会跳转到该文件中:
而当我们加上 .vue
后缀后:
可以看到,写上 .vue
后缀后在使用该组件时就有代码提示了,而且按住 Ctrl
键(Mac
电脑是 Command
键)点击这个文件路径也可以跳转到该文件中了。
所以,推荐大家在开发中,特别是使用 VS Code
开发时,导入 .vue
文件时,把 .vue
这一后缀也加上。
Vetur
扩展的自动导入配置说明
Vetur
扩展其实是可以进行一些配置的:
默认情况下,Vetur
会开启自动导入的功能(也就是说上图中红框中的内容默认会勾选上),好处如下:
而原来的时候,如果我们想要在 Main.vue
中使用 MainBanner.vue
,就需要先导入 MainBanner.vue
,再注册 MainBanner
组件,最后使用 MainBanner
组件,总共需要 3
步手动操作。而触发 Vetur
插件默认开启的自动导入功能只需要使用 MainBanner
组件(需要通过字母全部小写+短横线连接的格式触发)这一步操作就能帮我们自动完成导入和注册组件这两步操作(当然,格式可能有点问题,后面我们会通过自动格式化代码解决这个问题)。
虽然 Vetur
插件的这个自动导入功能看起来很好用,但我个人不喜欢用它,原因如下:
- 如果不使用某些格式化插件,这个自动导入功能导入和注册的代码格式会有点乱,甚至有时候生成代码的位置是错误的,还得自己手动修改;
- 个人喜欢对自己导入的东西按一定的顺序导入,方便后续查找某个东西的导入位置,而这个自动导入功能导入的东西的顺序有可能是乱的,后续可能不方便找某个东西的导入位置;
因此,我这里关闭了(取消勾选)Vetur
的这个自动导入功能。之后,我们用到哪个组件时,就自己来导入并注册,最后再来使用。