it-swarm.com.de

Vue JS 2.0 rendert nichts?

Mit Vue (^ 2.0.0-rc.6) + Browserify ist der Einstiegspunkt index.js:

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hallo.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

Leerer weißer Bildschirm, habe ich etwas verpasst?

BEARBEITEN:

Der Eintrag html ist nur <div id="root"></div>, keine Fehler in den Konsolenprotokollen, und ich bin ziemlich sicher, dass Hello.vue geladen wird, da console.log('test') diese Datei in der Konsole angezeigt wird.

EDIT 2:

Fehler gefunden:

[Vue warn]: Sie verwenden nur die Laufzeitumgebung von Vue, in der die Vorlagenoption ist nicht verfügbar. Kompilieren Sie entweder die Vorlagen in Render-Funktionen oder verwenden Sie den Compiler-Build. (gefunden in anonyme Komponente - verwenden Sie die Option "name", um das Debuggen von __.-Nachrichten zu verbessern.)

Bedeutet das, dass ich die Webpack-Lösung verwenden muss? Kann kein Standard-HTML verwenden.

L&OUML;SUNG: Importieren von Vue aus 'vue/dist/vue.js'

36
user2002495

Nur um das Leben für Leute zu erleichtern, die nach der Antwort suchen: 

import Vue from 'vue/dist/vue.js'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

Vom Autor - 2.0 bedeutet Standalone-Build (Compiler + Laufzeit). Der Standardexport des NPM-Pakets ist nur zur Laufzeit, da Sie bei der Installation von NPM die Vorlagen wahrscheinlich mit einem Build-Tool vorkompilieren.

51
dima

Wenn Sie ein Build-Tool wie browserify oder Webpack verwenden, können Sie höchstwahrscheinlich single file components verwenden, um solche Fehler zu vermeiden (in single file components werden die Vorlagen automatisch zusammengestellt, um Funktionen durch vueify zu rendern). Sie sollten unbedingt versuchen, Vorlagen an anderer Stelle zu vermeiden. Im Forum und in der Dokumentation finden Sie Antworten, wie Sie diese vermeiden können.

Ich weiß jedoch aus eigener Erfahrung, dass es nicht immer leicht ist, die Vorlagen in Ihrem Projekt zu finden, die die Fehlermeldung verursachen. Wenn Sie dasselbe Problem als vorübergehende Problemumgehung haben, sollte Folgendes helfen:

Sie sollten 'vue/dist/vue.js' nicht importieren (siehe Dokumentation: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime- baut warum nicht)

Stattdessen sollten Sie mit dem von Ihnen verwendeten Build-Tool umgehen.

In meinem Fall verwende ich browserify, wo Sie Aliasify zum Erstellen des Alias ​​verwenden können. Fügen Sie Ihrer package.json-Datei Folgendes hinzu:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

für Webpack-Benutzer müssen Sie Ihrer Konfiguration anscheinend Folgendes hinzufügen:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

Weitere Informationen finden Sie in der Dokumentation: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

28
gwildu

Für Vue 3.4.0 können Sie eine neue Datei im Stammverzeichnis des Projekts hinzufügen

vue.config.js und füge folgendes hinzu.

module.exports = {
  runtimeCompiler: true
}

Das nächste Mal, wenn Sie die App starten, können Sie sehen

Erfolgreich in 204ms kompiliert
20:46:46

App running at:
0
Krishnadas PC

Mit Brunch habe ich dies behoben, indem ich diese Regel in brunch-config.js hinzugefügt habe:

  npm: {
    aliases: {
      vue: "vue/dist/vue.js"
    }
  }

siehe http://brunch.io/docs/config#npm

Es sollte eine Vue-Komponente mit einem inneren <template> erstellt werden:

<template>
  <div> hello </div>
</template>

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>
0
Ehvince