Comment exécuter des fichiers vue dans le navigateur-Questions et réponses frontales-php.cn

Comment exécuter des fichiers vue dans le navigateur

青灯夜游

Libérer： 2023-01-11 09:22:51

original

18232 Les gens l'ont consulté

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.

Comment exécuter des fichiers vue dans le 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+&#39; &#39;+res.statusText), { res });
        return await res.text();
      },

      addStyle(textContent) {

        const style = Object.assign(document.createElement(&#39;style&#39;), { textContent });
        const ref = document.head.getElementsByTagName(&#39;style&#39;)[0] || null;
        document.head.insertBefore(style, ref);
      },
    }

    const { loadModule } = window[&#39;vue3-sfc-loader&#39;];

    const app = Vue.createApp({
      components: {
        &#39;my-component&#39;: Vue.defineAsyncComponent( () => loadModule(&#39;./myComponent.vue&#39;, options) )
      },
      template: &#39;<my-component></my-component>&#39;
    });

    app.mount(&#39;#app&#39;);

  </script></body></html>

Copier après la connexion

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(&#39;hello world&#39;)
  }
}
</script>

<style scoped>
  .title {
    font-size: 40px;
    color: red;
  }
</style>

Copier après la connexion

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.