Beim Importieren eines Pakets in ES6: „Fehler beim Auflösen des Modulbezeichners „vue““

Question 1

Ich versuche, einigen Vue-Tutorials zu folgen, und ich kann Vue derzeit nicht in eine importieren .js Datei und importieren Sie diese Datei dann in my index.html. So importiere ich das Skript in meine index.html:

<script src="https://stackoverflow.com/questions/52612446/./js/main.js" type="module"></script>

Wenn ich das in meinem mache main.js Datei:

import Vue from 'vue';

In der Browserkonsole erhalte ich folgenden Fehler:

Nicht erfasster TypeError: Fehler beim Auflösen des Modulbezeichners „vue“. Relative Verweise müssen entweder mit „https://stackoverflow.com/“, „./“ oder „../“ beginnen.

Wenn meine Importzeile an:

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

Dann bekomme ich einen anderen Fehler:

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

Was mache ich falsch?

Question 2

Die Art und Weise, wie Sie ES-Module verwenden können in Ihrem Browser direkt (Stand Juni 2020) ist somit:

Verwenden Sie die ESM-Version Ihrer Abhängigkeiten (diejenige, die import anstatt require). Beispielsweise ist die Vue ESM-Version verfügbar unter: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js
Lassen Sie Ihren Browser mit dem Experimentellen arbeiten importmap Merkmal. Karten importieren ist eine neue Web-Empfehlung, die noch nicht in Mainstream-Browsern unterstützt wird. https://wickg.github.io/import-maps/#import-map In Chrome ist dies unter chrome://flags#enable-experimental-productivity-features
(Neueste Chrome-Versionen haben dies unter verschoben chrome://flags#enable-experimental-web-platform-features)
Erstelle ein importmap in Ihrer HTML-Datei. Es funktioniert nur mit Inline <script> Tags im Moment in Chrome. Zum Beispiel:

<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
} }
</script>

Laden Sie Ihren eigenen Code als ESM-Modul.

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

In Ihren eigenen Skripten und den Skripten, die Sie importieren, können Sie jetzt erfolgreich aus benannten Modulen importieren.

Vollständiges Beispiel:

<html>
<body>
<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
} }
</script>
<script type="module">
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const router = createRouter()

export default createApp({
  router
})
</script>
</body>
</html>

Question 3

UPDATE (2020-05-10)

Verwendung von ES6-Modulen ohne Webpack

Wenn Sie mit arbeiten ES6 dann Sie sollte nicht manuelles Einfügen Ihrer main.js hinein index.html – Dies wird von erledigt Webpaket. Eigentlich geht das einfachste Tutorial für Vue so:

npm install -g vue-cli
vue init webpack my_project

npm starte dev (und beginne mit der Entwicklung – Ergebnis ist verfügbar unter http://localhost:8080)
npm run build (Ergebnis ist in der ./dist Ordner Ihres Projekts

Außerdem sollten Sie Vue so importieren

Vue aus ‘vue’ importieren;

und nicht so

importiere Vue aus ‘../../node_modules/vue’;

BEARBEITEN

Okay, wenn Sie darauf bestehen, den Anfängerpfad zu gehen und keine Webpack- und Single-File-Vue-Komponenten zu verwenden – dann sollten Sie so beginnen:

<!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="https://stackoverflow.com/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>

Und dein /app/app.js wird so aussehen:

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: "https://stackoverflow.com/"
        , 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');

Und dein /app/login.js Komponente sieht so aus:

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

Question 4

Sie können “vue importieren …” nur verwenden, wenn Sie die CLI und das Webpack usw. verwenden.

Wenn Sie Vue direkt auf einer Webseite verwenden, können Sie den Anweisungen unter folgen https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include und fügen Sie eine Zeile wie diese in Ihre HTML-Datei ein:

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

Tun Sie dies, bevor Sie Ihr eigenes Skript importieren, und dann Vue wird definiert und muss nicht erneut importiert werden. Importieren Sie Ihr Skript ohne das Attribut “Modul”. Im Skript können Sie Folgendes ausführen:

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

Dies setzt voraus, dass Sie irgendwo auf Ihrer HTML-Seite Folgendes haben:

<div id=myApp></div>