vue 3.0 webstorm上使用代码报错,感觉是没有安装成功

现在在学习vue 3.0
更新了最新版本后,读文档学习,模仿文档代码但是却报错,有大佬可以帮我看看吗

<template>
    <div id="app">
        <a href="javascript:void(0)" class="left" v-on:click="prev">
            <input type="button">
            <img :src="imgArr[index]">
        </a>
        <a href="javascript:void(0)" class="right" v-on:click="next">
            <input type="button">
        </a>
    </div>
</template>

<script>

    const App = Vue.createApp({
        data() {
            return {
                index: 0,
                imgArr: ["./img/1.png",
                    "./img/2.png",
                    "./img/3.png",
                    "./img/4.png",
                    "./img/5.png",
                    "./img/6.png",
                    "./img/7.png",]
            }
        },
        method: {
            next() {
                this.index++
            },
            prev() {
                this.index--
            }

        }
    }).mount('#app')

</script>

<style scoped>

</style>

代码图片说明
这里报错 提示信息
ESlist: app is assigned but never used
ESlist:vue is not defined (no-undef)

猜想是vue 3.0 版本不对 用其他的方法也会有同样的方式报错。

vue 没有导入啊

import Vue from 'vue'