报错:[Vue warn]: Failed to resolve directive: directive (found in <Anonymous>)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.use</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" v-directive>
    </div>
    <script>
        //定义插件指令 let 类似 var
        let MyPlugin = {}
        //编写install方法
        MyPlugin.install = function (Vue, options) {
            console.log(options)
            Vue.directive('directive', {
                //绑定到元素时调用
                bind(el, binding) {
                    el.style = 'width:100px;height:100px;background-color:red;'
                }
            })
        }
        //引用插件
        Vue.use('MyPlugin', { someOption: true })
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>
</html>

https://blog.csdn.net/qq_42229253/article/details/81285804