Nicht erfasster TypeError: Die Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „using“).

Question

Ich versuche, ein neues Projekt mit vue js zu starten. Ich glaube, ich habe alle Abhängigkeiten, die ich brauche, über das Terminal. Ich habe npm, vue, vue-bootstrap und vue-router installiert. Der Fehler kommt von router.js, Zeile 7 auf Vue.use(VueRouter).

Dies ist der Code meiner main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router.js"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Das ist mein router.js

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "@/pages/Home.vue"
import About from "@/pages/About.vue"
import Contact from "@/pages/Contact.vue"

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  
  ]
})

Entschuldigung, ich habe die Import-Vue-Zeile in dieselbe Zeile wie den Code-Indikator eingefügt, aber sie wurde abgeschnitten, aber der Fehler ist immer noch da.

Der vollständige Fehler ist dieser:

router.js?41cb:7 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
    at eval (router.js?41cb:7)
    at Module../src/router.js (app.js:1261)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1141)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1274)
    at __webpack_require__ (app.js:849)
eval    @   router.js?41cb:7
./src/router.js @   app.js:1261
__webpack_require__ @   app.js:849
fn  @   app.js:151
eval    @   main.js:12
./src/main.js   @   app.js:1141
__webpack_require__ @   app.js:849
fn  @   app.js:151
1   @   app.js:1274
__webpack_require__ @   app.js:849
checkDeferredModules    @   app.js:46
(anonymous) @   app.js:925
(anonymous) @   app.js:928

Answer 1

使用 vue 3 创建应用程序，您必须使用 Vue.createApp 方法，而不是创建新的 vue 实例。

new Vue({
  router,
}).$mount('#app')

变成：

const app = Vue.createApp({
      router,
})

app.mount('#app')

请记住，渲染 api 也发生了变化，而在 2 小时内被注入到函数 args 中，现在您必须从 vue 导入它。例如：

import { h } from 'vue'
export default {
  render() {
    return h('div')
  }
}

有关文档的更多信息：此处.

更新。根据评论中的要求，我扩展了示例，包括如何在 vue 3 上使用插件。

回到这里的示例，如果我们想使用插件，我们需要在安装之前添加 .use 方法。例如：

const app = Vue.createApp({
      router,
})
app.use(ThePluginIWantToUse)

app.mount('#app')

Answer 2

Hiws的回答：

谢谢。