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 を インポートすることができる模様
早速使ってみる
使い方は Github の README に書かれているので、そのとおりに進めてみる
インストール
今回はサクッと試したいのでグローバルインストール
$ npm i -g @vue/dev-server
index.html と .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)の段階なので、あくまでお試し感覚でどうぞ - どのように動いているか興味のある人は Githubリポジトリ へ