はじめに

Vue.js の学習をするにあたって、最小構成の環境で進めていくにはどうすればいいかを考えたときのメモ書きです。

コンポーネントファイルを切り出したい

.vue ファイルのようにコンポーネントのファイルを別で定義していくと、学習した内容を分かりやすく管理できる、と思ったのですが、.vue ファイルを使うには webpacker が必須ということが分かりました。webpacker は使わず、できるだけシンプルな状態で Vue.js を触りたい…。そこで script タグで読み込むことで簡易的にファイルを切り出すことにしました。

vue-sample/
　├ index.html
　├ main.js
　└ sample-comonent.js

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Sample</title>
</head>
<body>
  <div id="app">
    <sample-component/>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- コンポーネントから読み込まないと上手くいかない -->
  <script src="sample-component.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

new Vue({
  el: '#app'
})

sample-component.js

Vue.component('sample-component', {
  template: '<p>this is sample component</p>'
})

学習やサンプル程度のコードならこれで十分進めていけると思います。