WebStorm中HTML调用Vue中data和methods的属性和方法，出现未解析的变量或类型的警告

问题遇到的现象和发生背景
WebStorm中HTML调用Vue中data和methods的属性和方法，出现未解析的变量或类型的警告
问题相关代码，请勿粘贴截图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>你好，{{name}}</h2>
        <h2>{{age}}</h2>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <!--简写-->
        <button @click="showInfo2($event,66)">点我输出66</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data() {
            return {
                name: '鹿漫漫',
                age:21
            }
        },
        methods: {
            showInfo1() {
                // console.log(this) //这个this是Vue实例对象
                alert('大家好');
            },
            showInfo2(event,value) {
                console.log(event,value)
            }
        }
    });
</script>
</html>

运行结果及报错内容

img

我知道你这个问题

原因：webstorm在解析代码进行提示的时候会把html文件中css选择器进行缓存，如果你在同一个文件夹下面写html，并且多个html中都有同样的<div id="root">，我指的是一模一样的，那么webstorm会认为这是同一个文件，在他寻找目标定义的时候，会去第一次缓存的文件中找，找不到就会提示这个错误。

办法，你在不同的html文件中，一个叫<div id="main">，另一个叫<div id="root">就解决了。

这是软件的一个bug，八个版本了，都没修正，草

你这应该不是常规开发遇见的，估计是日常敲代码或者学习之类的，因为只有学习的时候才会在一个文件夹下写一堆html，同时每个html都是用快捷键生成的，这样的div的id选择器名字都是一样的，才会出现这个问题。

常规开发中一般只有一个Vue实例，所以webstorm根本不care这样的小bug

开启 语法检查 eslinet了吗

js是弱类型语言,变量与函数不需要声明类型.
出现未解析的变量或类型的警告你不用管,只要代码能正常执行即可