【Vue.js】vue-cliを使ってプロジェクトを作成する

Vue.jsを使ったプロジェクトはある程度大きくなってくるとコンポーネント単位でファイルを分けたくなってくる。
その場合、単一ファイルコンポーネントとして .vue というファイルをコンポーネント単位で作っていくことになる。

今回は vue-cli を使って単一ファイルコンポーネントを前提としたプロジェクトを作成してみる。

$ yarn global add @vue/cli
$ vue create my-project

ここでは yarn を使っているが npm でも構わない。
インストールしたら vue create コマンドを使ってプロジェクトを作成する。

プリセットを選択できるので自由に選ぶ。

作成したプロジェクトの中を見てみると src/App.vue という親にあたるコンポーネントと src/components/HelloWorld.vue という子にあたるコンポーネントができている。

動作確認は以下のようにする。

$ yarn global add @vue/cli-service-global
$ cd my-project
$ vue serve src/main.js

これでサーバーが動き出すので、表示されるURLへアクセスすればOK。

あとは、これをベースに追加修正していくと良さげ。