Vue CLIを使う際に知っておきたいポイント

開発環境は、Windows 10 Pro(64bit) + node 14.17.0 + npm 6.14.13 + @vue/cli@4.5.12 + Vue 2.6.12。

Vue CLIを使っていて、自分が知っておきたいポイントをメモしておきます。

■新しいコンポーネントを追加した際にホットリロードを反映させたい

※Vue CLIの対話の中でvue-routerを入れている、typescriptを使っている前提で説明します
例えば、以下のファイルを、Signup.vueという名前で、src/viewsディレクトリに入れるとします。

<template>
  <div>
    <h1>Signup.vue</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'Signup',
  data: () => ({})
})
</script>

<style scoped>
</style>

次に、src/routerディレクトリ内のindex.tsを開いて、routes変数に入れる配列内の要素の末尾に、以下のオブジェクトを追加します。

{
  path: '/signup',
  name: 'Signup',
  component: () => import('../views/Signup.vue')
}

これによって、Signup.vueを更新するたびに、ホットリロードが反映されます。