はじめに

Vue.jsについてはたくさん記事がありますが
章を分けてローカル環境からFCMと連携まで記事を書いていきます。

今回は「ローカル環境」でVue.jsのテンプレートを利用したサイトを作成していきます。

学べること

Vue.jsを動かすにはWebpack環境等を構築する必要があり時間がかかるところでもあります。
そこでVue.jsのCLI(Command Line Interface)を使い、サイト構築のテンプレートをダウンロードして開発していきます。今回はvue-cliを使ってVueを動かして行きます。

公式サイト
公式には「npm install -g @vue/cli-service-global」と書いてありますが
インストール後にコマンドを叩いても反応しないことがあったのでコマンドの内容を変更しています。

npm install -g @vue/cli

vue create sample

※ sampleはプロジェクト名

コマンド実行するとプロジェクトを作る上で必要な情報を要求してきます。
簡単な設定ではじめていきます。

成功したら下記の画面が表示されます。
フォルダを移動してコマンドを叩くことでサーバが立ち上がりサイトが出来上がります。

packege.jsonに記載されているコマンドを叩きサーバ/サイトを起動させる。

npm run serve

思ったほど簡単にvue環境を構築することができました。
次回はVue.jsでサイトができたのでFCMの機能とつなぎ込んでいきます。