TypeError：无法读取未定义的属性“创建”，错误“Vue”未定义Vue.js 3答案

【问题标题】：TypeError: Cannot read property 'created' of undefined, error 'Vue' is not defined Vue.js 3TypeError：无法读取未定义的属性“创建”，错误“Vue”未定义Vue.js 3
【发布时间】：2021-08-30 08:13:39
【问题描述】：

我正在尝试在文档中的 vue.js 3 中使用自定义指令，并且我使用了文档中的示例，但 我有这些错误：

“Vue”未定义。

当我从指令代码中删除“vue”时，这些错误会显示在控制台中：

未捕获（承诺中）类型错误：无法读取未定义的“已创建”属性
未捕获（承诺中）类型错误：无法读取 null 的属性“parentNode”

我认为这些错误是因为我使用 vue 版本 3，但我使用的是文档中 Vue vesion 3 中的自定义指令

主要的js：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";

createApp(App).use(store).use(router).mount("#app");

//Directive

const app = vue.createApp({})
app.directive('highlight', {
    beforeMount(el, binding) {
        el.style.background = binding.value
    }
})

组件：

<p v-highlight="'yellow'" class="content">{{ limit(content,90, 'more...') }}</p>

你能帮我吗

【问题讨论】：

标签： javascript html vue.js vuejs2 vuejs3

【解决方案1】：

在 Vue 3 中没有名为 vue 的对象或函数，只为您注册一个全局指令，就像您已经定义的应用程序实例一样：

...
const app=createApp(App)
app.use(store).use(router).mount("#app");

app.directive('highlight', {
    beforeMount(el, binding) {
        el.style.background = binding.value
    }
})

【讨论】：