Vue+Nuxt+Firebaseで作るSPA
この記事では、Vue+Nuxt+FirebaseでカンタンなSPAを構築したいと思います。web素人でも、なんとか構築できたので、皆様に紹介したいと思います。
SPAとは
spaとは、Single Page Application の略です。平たく言えば、モダンなウェブページを作る技術です。
普通のウェブページは、操作ボタンをクリックすると、カチっといって、画面がまるごと切り替わります。その間、通信速度が遅かったりすると、待たされることになってしまいます。
また、ページが切り替わるので、フォームに入力した内容が全部消えてしまったりもします。
SPAは、これらの欠点がありません。ページは画面全体の切り替えをせずに切り替わりますし、画面が切り替わっても、フォームの内容は消えないようにできます。
私がこの記事でシェアしたい技術を使って趣味で作った掲示板サイト
https://trip-8c6a8.firebaseapp.com
も、いじって頂けるとわかりますが、SPAらしく動きます(友人にちょっと荒らしてもらってます笑)。
環境構築
それでは、早速、環境構築からしていきましょう。
手順は、
１ vue+nuxtのセッティング
２ firebaseのセッティング
３ 試験デプロイ
です。
vue+nuxtのセッティング
まずは、npmとnodeを用意してくださいね。
それが整っていることを前提に、話をすすめます。
yarn global add @vue/cli
これで、vue-cliがインストールされます。
npm install を使わないのは、後々、妙なエラーが続発して手に負えなくなるからです。yarnだと、うまく行きます。
これで、nuxtのパッケージも合わせてインストールされたことになります。
firebaseのセッティングは、次回、です。
ありがとうございました。