Ich habe eine hallo.vue-Datei erstellt, jetzt, wie Sie dies in einer HTML-Datei verwenden? Ich habe bereits ein Webpack eingerichtet,Wie verwende ich eine .vue Datei in einem HTML?
<template>
<p>Hello</p>
<p>{{message}}</p>
</template>
<script>
module.exports = {
data: {
message: 'hello'
}
}
</script>
<style>
p {
font-size: 14px
}
</style>
Wie möchten Sie es verwenden?
Nehmen Sie die Demonstration von offiziellen Beispiel: vue-hackernews-2.0. Dies ist eine Komponente, so dass Sie importieren die component in einer anderen vue Datei wie this:
import Comment from '../components/Comment.vue'
und fügen Sie in der Liste der Komponenten in that vue instance:
components: { Spinner, Comment },
als Sie es in HTML verwenden können, wie this:
<comment v-for="id in item.kids" :key="id" :id="id"></comment>
danke, also importieren wir die Komponente in eine andere .vue-Datei, dann verwenden Sie diese .vue-Datei in einem HTML, ist es möglich, die Komponente direkt in einer HTML-Datei zu verwenden? – AngeloC
@AngeloC Eine [vue-Komponente] (https://vuejs.org/v2/guide/components.html) funktioniert nur in einer vue-Instanz, dh Sie definieren 'new vue ({...})' – Saurabh
Sie müssen nur Ihre gebündelt js-Datei in der HTML-Datei enthalten und umfassen div Montierer - so konnte Vue wissen, wo die App ausgeführt werden soll.
Ihre Index-Datei könnte wie folgt aussieht etwas (zeigt nur Körperabschnitt)
...
<body>
<div id="app"></div>
<script src="bundle.js">
</body>
...
Ihre Haupt Vue-Datei könnte wie folgt aussieht:
import Vue from 'vue'
import Hello from 'hello.vue'
const app = new Vue({
render: (h) => h(Hello)
}).$mount('#app')
Und auf diese Weise können Sie alle anderen speichern Komponenten in den hallo.vue.
Dies ist wahrscheinlich, dass Sie verwenden sollten, wenn Sie SPA erstellen.
musst du vue-cli ausführen? – Martian2049
Wenn Sie sagen, verwenden Sie die Komponente in einer HTML-Datei, meinst du es in einer neuen Vue() als Komponente verwenden? – Bert