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。
あとは、これをベースに追加修正していくと良さげ。
