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

解决Vue代码高亮与识别问题

原创已于 2022-08-21 16:44:34 修改 · 878 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

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

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

我的情况是这样的

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

<!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>