vue代码没有高亮，且无法识别

霍都j

已于 2022-08-21 16:44:34 修改

阅读量850

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2022-08-21 16:18:23 首次发布

本文链接：https://blog.youkuaiyun.com/ITyikaka/article/details/126452050

在IDEA中遇到Vue代码无法高亮显示和识别的问题，尝试了安装Vue插件但未见效。最终发现解决方案是确保`<script>`标签位于`<div id="app">`之后，并且都在`<body>`标签内，这使得IDE正确解析了Vue结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的情况是这样的

在这里插入图片描述
我的代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
  <script>

      //1. 创建Vue核心对象
      new Vue({
          el:"#app",
          data(){
              return {
                  username:""
              }
          }
        
      })

  </script>


</head>
<body>
<div id="app">

    <input v-model="username">

  {{username}}

</div>


</body>
</html>

按照网友的说法安装vue了，可是也没有用
在这里插入图片描述
可能是idea抽风了，也可能是我哪里没有注意到

写篇博客记录下

刚刚解决了

原来是script标签要写在div标签之后，且都在body中
如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">

    <input v-model="username">

  {{username}}

</div>


<script src="js/vue.js"></script>
<script>

  //1. 创建Vue核心对象
  new Vue({
    el:"#app",
    data(){
      return {
        username:""
      }
    }

  })

</script>



</body>
</html>

完