Vue CLIのvue serveが便利

Vue CLIを触っていたらこんなものがあることを知らなかった。
単体でVueのコンポーネントを試したりできるらしい。

cli.vuejs.org

手順としては簡単。

• npm install -g @vue/cli
• npm install -g @vue/cli-service-global
• vue serve [実行したい.vueファイル]

Vue CLIの基本的な設定（webpackやbabel,eslintなど）が適用されてビルドされている。
地味に -o オプションでいちいちコピペしなくてもブラウザが自動で開くか選択できるとか気が聞いている。

だからVueの構文試したいなとかなったらすぐに作ってすぐに試してが出来て便利。
こんな風にコンポーネントを作って。

App.vue

<template>
  <div>
    <h1>Hello!</h1>
    <ul>
      <list-item v-for="item in list" :value="item"/>
    </ul>
  </div>
</template>
<script>
import ListItem from './ListItem.vue';

export default {
  components: { ListItem },
  data() {
    return {
      list: [1,2,3]
    };
  },
};
</script>

ListItem.vue

<template>
  <li>{{ value }}</li>
</template>
<script>
export default {
  props: {
    value: {
      required: true,
      type: Number,
    },
  },
};
</script>

そのまま vue serve -o とするとApp.vueが実行されたブラウザが開かれる。

$ vue serve -o
 INFO  Starting development server...
 98% after emitting                                                           t
 DONE  Compiled successfully in 1146ms                                  11:38:35


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.108:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

JSも実行できるのでVue RouterとかVuexも使えそうかな？
用途としてはコンポーネント単体を試すくらいがちょうどいいかも。