Heim >Web-Frontend >Front-End-Fragen und Antworten >So führen Sie Vue-Dateien im Browser aus
So führen Sie Vue-Dateien im Browser aus
- 青灯夜游Original
- 2021-09-29 16:57:4318339Durchsuche
So führen Sie die Vue-Datei im Browser aus: 1. Öffnen Sie das cmd-Befehlsfenster und geben Sie mit dem Befehl cd das Vue-Projektverzeichnis ein, das die Vue-Datei enthält. 2. Führen Sie im Projektverzeichnis den Befehl „npm run dev“ aus. um das Projekt zu starten; 3. Geben Sie einfach „localhost:8080“ in die Adressleiste des Browsers ein.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer. Die VUE-Datei wird im Browser ausgeführt Die myComponent.vue-Datei, Datei Der Inhalt lautet wie folgt:
<html><body>
<p id="app"></p>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue },
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});
app.mount('#app');
</script></body></html>Starten Sie das Projekt
-
Verwenden Sie in cmd den Befehl cd, um das Vue-Projekt aufzurufen
Führen Sie im Projektverzeichnis den Befehl aus und unsere Anwendung wird per Hotload ausgeführt. Durch das Laden können wir die geänderten Effekte in Echtzeit sehen, ohne den Browser nach der Änderung des Codes manuell aktualisieren zu müssen.
Geben Sie localhost:8080 in den Browser ein.
-
Verwandte Empfehlungen: „vue.js Tutorial
“
Das obige ist der detaillierte Inhalt vonSo führen Sie Vue-Dateien im Browser aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!