Fehler: Mounten der Komponente fehlgeschlagen: Vorlage oder Renderfunktion nicht definiert. (gefunden in root instance)

Question

Ich benutze browserify und NPM, um in vue zu ziehen.

var Vue = require('vue'); 

module.exports = function() { 

new Vue({ 
el: '#app', 
    data: { 
    message: 'Hello Vue2!' 
    } 
}) 
} 

Ich bekomme den Mount-Fehler. Dies könnte das Problem sein. https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

Allerdings, wenn ich die Linie meines package.json

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

ich hinzufügen, wird einen Fehler

Fehler: Das Parsen Datei/Users/Marke/Testsite/node_modules/vue/dist/vue. common.js: Linie 6278: Ungültiger regulärer Ausdruck

Mein html ist einfach

<div id="app"></div> 

Answer 1

Ich glaube, Sie aliasify dafür verwenden müssen (ich nehme an, Sie haben bereits vueify installiert ist):

npm install alisaify --save dev 

dann in Ihrem package.json Sie tun können:

"browserify": { 
    "transform": [ 
     "aliasify", 
     "vueify" 
    ] 
    }, 
    "aliasify": { 
    "aliases": { 
     "vue": "vue/dist/vue.common" 
    } 
    } 

---

vueify Zur Installation können Sie einfach tun:

npm install vueify --save-dev 

Sie können dann u single file components se

---

Die runtime build und standalone build sind die Quelle für viel Verwirrung, so dass ich möchte nur erklären, wie diese baut Arbeit und was diese Mount-Fehler wirklich ist.

Die runtime build ist einfach die Standalone Build ohne die Möglichkeit, Vorlagen erstellen, so müssen Sie alle Vorlagen erstellen, bevor Sie sie verwenden können, was bedeutet, hat es mit einem Build-Tool wie webpack oder browserify verwendet werden. Für webpackvue-loader Griffe diese Zusammenstellung für Sie und mit browserify Sie Vueify verwenden, so abhängig von Ihrem Build-Tool benötigen Sie eine dieser, um Ihre .vue Dateien in Render-Funktionen zu verwandeln.

Intern dieser Compilation Schritt wird etwas dauern, das wie folgt aussieht:

<template> 
    <div> 
    Hello World 
    </div> 
</template> 

Und es in etwas umwandeln, das wie folgt aussieht:

render: function(createElement) { 
    return createElement('div','Hello World'); 
} 

Nun, für diese Sie einen Eintrag muss arbeiten zeigen Sie für Ihre gesamte App, und dieser Einstiegspunkt muss auf Ihrem main vue instance:

montiert werden

Nun kompilieren Sie in Ihrem Kompilierungsschritt Vue alle Ihre Komponenten für Sie, wobei die Komponente App der Einstiegspunkt ist.So in App.vue können Sie etwas, das wie folgt aussieht:

<template> 
    <message :msg="Hello"></message> 
</template> 

<script> 
    // import the message component so we can display a message 
    import message from './message.vue'; 

    export default { 
    components: { 
     message 
    } 
    } 
</script> 

OK, also warum sind Sie immer die Render-Funktion Fehler nicht definiert? Einfach, weil Sie keine Renderfunktion definiert haben. Dies mag offensichtlich erscheinen, aber der Fehler ist wirklich schwierig, weil Sie zuerst alle Interna kennen müssen. Der wirkliche Weg, dies zu beheben, besteht darin, Ihre app als single file component zu definieren und sie dann mit einer Renderfunktion zu Ihrer Vue-Hauptinstanz hinzuzufügen und dann das Ganze zu kompilieren. So Ihre gesamte App wird nun wie folgt aussehen:

message.vue:

<template> 
    <div>{{message}}</div> 
</template> 

<script> 
    export default { 
    data(){ 
     return { 
     messsage: "Hello Vue2!" 
     } 
    } 
    } 
</script> 

main.js

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

new Vue({ 
    el: '#app', 
    render: (createElement) => { 
    return createElement(message) 
    } 
}); 

Jetzt Vue wird Ihr Element mit der ID "app" jagen und injizieren Ihre Nachrichtenkomponente hinein.

Also, lassen Sie uns einfach sehen, wie Sie dies schreiben könnte, wenn Sie es manuell zu tun hatte:

Vue.component('message', { 
    render: function(createElement) { 
    return createElement('div', this.msg) 
    }, 
    data() { 
    return { 
     msg: "Hello Vue2!", 
    } 
    } 
}); 

new Vue({ 
    el: "#app", 
    render: function(createElement) { 
    return createElement('message') 
    } 
}) 

die JSFiddle Hier ist (die wirklich die Laufzeit wird mit nur bauen) : https://jsfiddle.net/6q0Laykt/

Die standalone build enthält den Compiler, sodass Sie diesen Kompilierungsschritt nicht durchführen müssen. Der Kompromiss für diese Bequemlichkeit ist eine größere Vue-Build und mehr Overhead.

Es ist auch notwendig, diese Build in Stelle zu haben, wenn Sie Komponenten direkt in Ihrem HTML gerendert haben möchten, d. H. Wenn Sie keine einzelnen Dateikomponenten verwenden. Die CDN ist interessant, denn soweit ich weiß, ist es eigentlich ein anderer Build, der einen Browser benötigt, aber er hat die Fähigkeit, templates für Sie zu kompilieren. Das ist also der Grund, warum dein Code mit dem CDN läuft.

Hoffentlich irgendwo darin finden Sie eine Lösung für Ihr Problem, aber wenn Sie immer noch die standalone build verwenden möchten und Sie einen Fehler mit der common.js Datei erhalten, kann es sehenswert sein, wenn die nicht geläufige Version funktioniert, was war vorher als Datei zum Alias ​​empfohlen: