.vue文件中template标签爆红

.vue文件中template标签爆红

• 问题发生背景

  在学习Vue单文本组件后，使用vue-cli初始化一个Vue工程后，在编写单文本组件时，发现template出现爆红
  

• 问题出现的原因

  由于我在VSCode中安装了太多的插件，导致发生了插件冲突。主要是
  是vetur插件和某一个插件发生了冲突，具体是哪一个插件我并没有去尝试（因为我安装了太多了插件，尝试起来比较费时间😆）
  
  PS：vetur插件支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript

• 问题的解决方案

  • 方案一 ：将除vetur以外的插件全部禁用，然后一个一个启用，逐一排查是哪一个插件和vetur发生了冲突
    优点：从根本上解决了问题
    缺点：安装的插件使用这种方法还好，如果你和我一样安装了很多的插件，就优点费时间了
  • 方案二：修改vetur的配置文件
    
    
    在vetur插件的配置文件中添加如下配置项：

    	"files.associations": {
       "*.vue": "html"
    	}
    

    

补充：还有个问题就是在使用 VSCode 创建了 .vue 文件之后，Vue 的插件，比如 vue，vue-beautify，vue-color，VueHelper，vertur 等等，可能会在 .vue 文件中使用无效，那么你需要修改一下 VSCode 右下角的文件类型。

它显示的类型竟然是 HTML，那么你需要点击它，在弹出的框中修改为 Vue 即可

参考文章

• https://blog.csdn.net/qq_41217010/article/details/89509851
• https://blog.csdn.net/zjuwwj/article/details/108194317
• https://juejin.cn/post/6877422214036062216