古い情報の記事にたまに反応が来るので最終版書きました

parcelとは

https://parceljs.org/
コンフィグ無しでウェブアプリケーション作ろうぜ・・・って言う感じのビルドツール

公式サイトでドキュメントあるのでみたらとても簡単になってます

環境構築

npm install --save vue
npm install --save-dev parcel-bundler

index.html

<html>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>

src/index.js

import Vue from 'vue/dist/vue.esm.js';
import MyApp from './MyApp.vue';

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});

MyApp.vue

<template>
  <div>
    {{ title }}
  </div>
</template>

<style>
</style>

<script>
  export default {
    data() {
      return({
        title: 'Hello World!',
      });
    },
  }
</script>

package.json

// parcel起動コマンド登録のため下記start部分を追加
"scripts": {
  "start": "parcel index.html"
}