Ralat Jenis Tidak Ditangkap: Tidak dapat membaca sifat yang tidak ditentukan (baca 'menggunakan')

Question

Saya cuba memulakan projek baharu menggunakan vue js. Saya fikir saya mempunyai semua kebergantungan yang saya perlukan melalui terminal. Saya memasang npm, vue, vue-bootstrap dan vue-router. Ralat datang daripada router.js, baris 7 pada Vue.use(VueRouter).

Ini ialah kod main.js saya

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')

Ini penghala saya.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
    }
  
  ]
})

Maaf, saya meletakkan baris import vue pada baris yang sama dengan penunjuk kod, tetapi ia terputus, tetapi ralat masih ada.

Ralat lengkapnya ialah ini:

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

Untuk membuat aplikasi menggunakan vue 3, anda mesti menggunakan kaedah Vue.createApp dan bukannya membuat contoh vue baharu.

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

menjadi:

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

app.mount('#app')

Perlu diingat bahawa api pemaparan juga berubah dan dalam 2 jam args telah disuntik ke dalam fungsi dan kini anda perlu mengimportnya daripada vue. Contohnya:

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

Maklumat lanjut tentang dokumentasi: di sini.

Dikemas kini. Seperti yang diminta dalam ulasan, saya telah melanjutkan contoh untuk memasukkan cara menggunakan pemalam pada vue 3.

Berbalik kepada contoh di sini, jika kita ingin menggunakan plugin, kita perlu menambah kaedah .use sebelum memasangnya. Contohnya:

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

app.mount('#app')

Answer 2

Jawapan Hiws:

Terima kasih.