Maison >interface Web >Questions et réponses frontales >Comment exécuter des fichiers vue dans le navigateur
Comment exécuter des fichiers vue dans le navigateur
- 青灯夜游original
- 2021-09-29 16:57:4318401parcourir
Comment exécuter le fichier vue dans le navigateur : 1. Ouvrez la fenêtre de commande cmd et utilisez la commande cd pour entrer dans le répertoire du projet vue contenant le fichier vue ; 2. Dans le répertoire du projet, exécutez la commande "npm run dev" pour démarrer le projet ; 3. Entrez simplement "localhost:8080" dans la barre d'adresse du navigateur.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Le fichier vue s'exécute dans le navigateur
Nouveau fichier vue
L'exemple officiel est le suivant, vous devez créer le fichier index.html :
<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>Ensuite, vous devez créer le fichier myComponent.vue, fichier Le contenu est le suivant :
<template>
<p class="title">
hello world
</p>
</template>
<script>
export default {
setup () {
console.log('hello world')
}
}
</script>
<style scoped>
.title {
font-size: 40px;
color: red;
}
</style>Démarrez le projet
Dans cmd, utilisez la commande cd pour entrer dans le projet vue
Dans le répertoire du projet, exécutez la commande npm run dev, et notre application sera exécutée en utilisant le chargement à chaud. Le chargement nous permet de voir les effets modifiés en temps réel sans actualiser manuellement le navigateur après avoir modifié le code.
Entrez localhost:8080 dans le navigateur.
Recommandations associées : "Tutoriel vue.js"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!