recherche

Maison  >  Questions et réponses  >  le corps du texte

Uncaught TypeError : Impossible de lire la propriété non définie (lire « utilisation »)

J'essaie de démarrer un nouveau projet en utilisant vue js. Je pense avoir toutes les dépendances dont j'ai besoin via le terminal. J'ai installé npm, vue, vue-bootstrap et vue-router. L'erreur vient de router.js, ligne 7 sur Vue.use (VueRouter).

Voici le code de mon 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')

Voici mon routeur.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
    }
  
  ]
})

Désolé, j'ai mis la ligne import vue sur la même ligne que l'indicateur de code, mais elle a été coupée, mais l'erreur est toujours là.

L'erreur complète est la suivante :

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

P粉391677921P粉391677921331 Il y a quelques jours583

répondre à tous(2)je répondrai

  • P粉005134685

    P粉0051346852024-03-26 15:04:36

    Pour créer une application à l'aide de vue 3, vous devez utiliser la méthode Vue.createApp au lieu de créer une nouvelle instance de vue.

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

    devient :

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

    Gardez à l'esprit que l'API de rendu a également changé et qu'en 2 heures, les arguments ont été injectés dans la fonction et vous devez maintenant l'importer depuis vue. Par exemple :

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

    Plus d'informations sur la documentation : ici.

    Mise à jour. Comme demandé dans les commentaires, j'ai étendu l'exemple pour inclure comment utiliser le plugin sur vue 3.

    Retour à l'exemple ici, si nous voulons utiliser le plugin, nous devons ajouter la méthode .use avant de l'installer. Par exemple :

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

    répondre
    0
  • P粉891237912

    P粉8912379122024-03-26 12:50:20

    Réponse de Hiws :

    Merci.

    répondre
    0
  • Annulerrépondre