vue-dev-server 해보세요.

이른바 vue-dev-server

Cooked up a POC for serving Vue single-file components over native ES modules imports: https://t.co/jghZaYoFMe — Evan You (@youyuxi) 2019년 3월 3일

Imagine you can import Vue single-file components natively in your browser... without a build step.

컴파일 없이 브라우저에서 Vue의 Single File Component 모드를 직접 가져올 수 있습니다

얼른

사용 방법은Giithub의README에 쓰여있으며 그에 따라

vuejs/vue-dev-server

설치하다.

이번에 한번 해보고 싶어서 전 세계에 설치

$ npm i -g @vue/dev-server

index.) 및 입니다.vue 파일 준비

적당한 작업 디렉터리 만들기

$ mkdir vue-dev-server-sample
$ cd vue-dev-server-sample

index.html의 생성

vue-dev-server-sample/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>vue-dev-server-sample</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
    // CDN から直接 Vue をインポートする
    import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
    import App from './App.vue'

    new Vue({
      render: h => h(App)
    }).$mount('#app')
    </script>
  </body>
</html>

다음으로 익숙한 Single File Component 준비

vue-dev-server-sample/App.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Vue SFC without any build !!'
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #42b983;
}
</style>

서버 시작

$ npx vue-dev-server
server running at http://localhost:3000

총결산

Vue SFC
아직 개념증명Proof of Concept의 단계이기 때문에 꼭 해보세요
관심 있는 사람이 가기Giithub 창고

Reference

이 문제에 관하여(vue-dev-server 해보세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teinen_qiita/items/709220fcb01a3aa3452d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다