Home >Web Front-end >Front-end Q&A >How to run vue files in the browser

How to run vue files in the browser

青灯夜游Original: 2021-09-29 16:57:4318401browse

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.

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>

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>

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!

vue.js html npm JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What environment does vue need to be installed?Next article：What environment does vue need to be installed?

See more

How to run vue files in the browser

Related articles