Vue.jsでSPAを作ってみた話

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

先日Adobe XDでプロトタイプを制作してみた話を記事にしましたが、そのプロトタイプを基にVue.jsでSPAを制作してみました。

それがこちら。

• WHAT I CAN DO – ma-ya’s CREATE

SPAなので基本的にページ遷移が発生しません。

便宜上各ページにURLは割り当てられますが、初回のサイトレンダリングが完了した後はJavascriptで表示を切り替えます。

なんだか難しそう…と、初めは思ってたんですが、これが実際やってみるとあら不思議。

シンプルな構成のサイトくらいなら、仕組みそのものは結構サクっと出来ちゃいます。

今回のケースの場合、ざっくりと流れを言うと、

1. Vue CLIのインストール
2. プロジェクトの作成
3. ヘッダーナビの設置（＝全てのページで表示する共通コンテンツ設置）
4. コンポーネント作成（＝各ページのコンテンツ作成）
5. ルーティング（＝表示するページの管理）
6. ビルド（＝実際にアップロードするファイル群の生成）
7. サーバーへアップロード

という感じ。

各ページのコンテンツですが、ページ＝コンポーネントとしてページ毎に用意します。

②、⑥あたりはコマンドで指示するとVue CLIが勝手にやってくれるので、普段の制作と異なる工程は実質⑤のルーティング作業くらい。

とはいえ、自分もそうですがコマンド、いわゆる黒い画面の操作はまだまだ緊張する。。

ので、「こまけぇこたぁいいんだよ – のんびりVue.js超入門」でも近日中に紹介していこうと思います。

あくまで今回のケースでの実例とはなりますが、どなたかの参考になればと。

それでは～