집 > 기사 > 웹 프론트엔드 > 브라우저에서 Vue 파일을 실행하는 방법

브라우저에서 Vue 파일을 실행하는 방법

青灯夜游원래의: 2021-09-29 16:57:4318334검색

브라우저에서 vue 파일을 실행하는 방법: 1. cmd 명령 창을 열고 cd 명령을 사용하여 vue 파일이 포함된 vue 프로젝트 디렉터리를 입력합니다. 2. 프로젝트 디렉터리에서 "npm run dev" 명령을 실행합니다. 3. 브라우저 주소 표시줄에 "localhost:8080"을 입력하세요.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.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 파일, file 내용은 다음과 같습니다.

<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 파일을 실행하는 방법

관련 기사