首頁 > 文章 > web前端 > vue檔案怎麼在瀏覽器中執行

vue檔案怎麼在瀏覽器中執行

青灯夜游原創: 2021-09-29 16:57:4318335瀏覽

vue檔案在瀏覽器運行的方法：1、開啟cmd指令窗口，使用cd指令進入包含vue檔案的vue專案目錄中；2、在專案目錄中，執行指令「npm run dev」啟動項目；3、在瀏覽器網址列輸入「localhost:8080」即可。

vue檔案怎麼在瀏覽器中執行

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue檔案在瀏覽器中執行

#新vue檔案

##官方範例如下，你需要建立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>

然後你需要建立myComponent.vue 文件，文件內容如下：

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

#啟動專案

在cmd中，使用cd指令進入vue專案在專案目錄中，執行指令

npm run dev

在瀏覽器輸入localhost:8080即可。

vue檔案怎麼在瀏覽器中執行

相關文章