How to run vue files in the browser-Front-end Q&A-php.cn

How to run vue files in the browser

青灯夜游

Release： 2023-01-11 09:22:51

Original

18345 people have browsed it

How to run the vue file in the browser: 1. Open the cmd command window and use the cd command to enter the vue project directory containing the vue file; 2. In the project directory, run the command "npm run dev" to start Project; 3. Enter "localhost:8080" in the browser address bar.

How to run vue files in the browser

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The vue file is run in the browser

##New vue file

The official example is as follows, you need to create the index.html file:

<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>

Copy after login

Then you need to create the myComponent.vue file, the file content is as follows:

<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>

Copy after login

Start the project

In cmd, use the cd command to enter the vue project

In the project directory, run the command

npm run dev will run our application using hot loading. Hot loading allows us to see the modified effects in real time without manually refreshing the browser after modifying the code.

Enter localhost:8080 in the browser.

Related recommendations: "

vue.js Tutorial"

The above is the detailed content of How to run vue files in the browser. For more information, please follow other related articles on the PHP Chinese website!