web-dev-qa-db-fra.com

importation d'un package dans ES6: "Impossible de résoudre le spécificateur de module" vue ""

Essayer de suivre certains tutoriels Vue et je ne peux pas actuellement importer Vue dans un .js fichier, puis importez ce fichier dans mon index.html. Voici comment j'importe le script dans mon index.html:

<script src="./js/main.js" type="module"></script>

Si je le fais dans mon main.js fichier:

import Vue from 'vue';

J'obtiens l'erreur suivante dans la console du navigateur:

TypeError non détecté: échec de la résolution du spécificateur de module "vue". Les références relatives doivent commencer par "/", "./" ou "../".

Si ma ligne d'importation vers:

import Vue from '../../node_modules/vue';

Ensuite, j'obtiens une erreur différente:

http: // localhost: 63342/vue-official-tutorial/node_modules/vue net :: ERR_ABORTED 404 (Introuvable)

Qu'est-ce que je fais mal?

javascriptvue.js
9
zerohedge

Si vous travaillez avec ES6 , vous ne devez PAS insérer manuellement votre main.js en index.html - cela sera géré par Webpack . En fait, le tutoriel le plus simple pour Vue va comme ceci:

  1. npm install -g vue-cli
  2. vue init webpack my_project
  3. npm exécuter dev (et commencer à développer - le résultat est disponible sur http: // localhost: 808 )
  4. npm run build (le résultat est disponible dans le ./dist dossier de votre projet

En outre, vous devez importer Vue comme ceci

import Vue from 'vue';

et pas comme ça

import Vue from '../../node_modules/vue';

MODIFIER

D'accord, si vous insistez pour suivre le chemin des débutants et ne pas utiliser Webpack et les composants single-file Vue - alors vous devriez commencer comme ceci:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

  <title>My beginners project</title> 

  <link rel="stylesheet" type="text/css" href="/assets/css/styles.css" /> 
</head>
<body> 
  <div id="app">
    <router-view></router-view> 
  </div>

  <!-- templates for your components -->
  <template id="login">
    <div>test</div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script> 

  <!-- code for your components -->
  <script type="text/javascript" src="/app/login.js"></script> 

  <!-- Vue Root component should be last -->
  <script type="text/javascript" src="/app/app.js"></script> 
</body>
</html>

Et ton /app/app.js ressemblera à ceci:

  var badRoute = Vue.component('bad-route',
  {
    template: '<div id="bad_route"><h1>Page Not Found</h1><p>Sorry, but the page you were trying to view does not exist.</p></div>'
  });

  var vue_router = new VueRouter({
    base: '/app',
    mode: 'hash',
    routes:
    [
      {
        path: '/',
        redirect: '/login'
      },
      {
        path: '/login',
        component: loginForm,
        name: 'LOGIN'
      },

      {
        path: '*', // should be last, otherwise matches everything
        component: badRoute,
        name: 'NOT FOUND'
      }
    ]
  });

  // Main application
  var vue_app = new Vue(
  {
    router: vue_router,
  }).$mount('#app');

Et ton /app/login.js le composant ressemblera à ceci:

  var loginForm = Vue.component('login-form',
  {
    template: '#login', // should match the ID of template tag
    data: function()
    {
      var a =
      {
        username: '',
        password: '',
      };
      return a;
    },
    methods:
    {
    }
  });
7
IVO GELOV

Vous ne pouvez utiliser "import vue ..." que si vous utilisez la CLI et le webpack, etc.

Si vous utilisez Vue directement dans une page Web, vous pouvez suivre les instructions à https://vuejs.org/v2/guide/installation.html#Direct-lt- script-gt-Include et incluez une ligne comme celle-ci dans votre fichier HTML:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Faites-le avant d'importer votre propre script, puis Vue sera défini et vous n'aurez pas besoin de l'importer à nouveau. Importez votre script sans l'attribut "module". Dans le script, vous pouvez exécuter:

var x = new Vue({ 
  el: '#myApp',
  ... all the other stuff ...
})

Cela suppose que quelque part sur votre page HTML, vous avez:

<div id=myApp></div>
0
Glen Little