久しぶりにプログラミング言語の海をさまよっていると、何やら「Vue」という聞きなれないフレームワークが流行っているのだとか。なんでも、Reactさんがとってもフレンドリーになったイケメンのようなフレームワークだとか。
雑食系としては手を付けないわけにはいきません！というわけで早速さわさわしてみたのでちょっとまとめておきます。
#やること
Vue-cliを使ってアプリケーションを作ってみます。
- 認証とDBにはFirebaseを採用します。もちろん無料枠で！
- 外部APIとの連携についてもちょっとトライしてみます。jalanさんとyelpを使いたいと思います。
- せっかくなんで課金機能もちょちょいと組み込んでみましょう。stripeでいいかな。
開発環境はwindowsにubuntsuのっけてやってます。nodeとnpmが入ればぶっちゃけなんでもOKです。
##ステップ1：vue-cliの準備
まずはnodeとnpmをインストールしましょう。当方のバージョンは以下。
$ node -v
v8.11.3
$ npm --v
5.10.0
迷ったらここらへんをどうぞ。
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
続いてvue-cliをインストールしましょう。バージョンは3を使いました。
$ npm install -g @vue/cli
$ vue --version
3.0.1
ここらへんも参考にしちゃってください。
https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2
##ステップ2：早速vueアプリを作りましょう
名前は何でもいいのですが、とにかくアプリケーションをつくりましょう。
$ vue create my-app
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
「Manually select features」を選択してください。babelとrouterだけ◎をつけておきます。その他はyesマンで進めましょう！
しばらくするとごにょごにょと画面が動き出します。そして、ノートパソコンのファンの回転数が激上がりします。
Vue CLI v3.0.1
✨ Creating project in /ubuntu/vue/app/my-app.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
色々インストールしてるので結構時間がかかります。
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project my-app.
👉 Get started with the following commands:
$ cd my-app
$ npm run serve
無事作成完了。おめでとうございます！今日はここまでにしておきましょう。
つぎはvueのroute周りをみていきますよー