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

Home

Web Front-end

Front-end Q&A

How to run vue files in the browser

Sep 29, 2021 pm 04:57 PM

run

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:

&lt;html&gt;&lt;body&gt;
  &lt;p id=&quot;app&quot;&gt;&lt;/p&gt;
  &lt;script src=&quot;https://unpkg.com/vue@next&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;

    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( () =&gt; loadModule(&#39;./myComponent.vue&#39;, options) )
      },
      template: &#39;&lt;my-component&gt;&lt;/my-component&gt;&#39;
    });

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

  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

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

&lt;template&gt;
  &lt;p class=&quot;title&quot;&gt;
    hello world
  &lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  setup () {
    console.log(&#39;hello world&#39;)
  }
}
&lt;/script&gt;

&lt;style scoped&gt;
  .title {
    font-size: 40px;
    color: red;
  }
&lt;/style&gt;

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!

Statement of this Website

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