Vue.js

Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

最近徐々に増えつつある『SPA(エスピーエー)』。

『SPA』とは、『シングルページアプリケーション』の略で、

一般的なホームページと比べると、

ページ移動の時の読み込みがほとんどなくスムーズに動く事が特徴です。

  • 一般的なホームページ・・ページ移動毎にページ全体を読み込む
  • SPA・・部分的に読み込む(読み込む量が少ないのでさくっと動く)

『SPA』なホームページを作るには、

『JavaScript(ジャバスクリプト)』をゴリゴリ書く必要があるのですが、

一から書いていくととても大変なので、

近年、効率よく『SPA』なホームページをつくる方法が誕生しました。

いくつかある方法うちの、『Vue.js(ビュージェイエス)』を使って、

『SPA』のテストページをつくってみたので、その方法をまとめてみます。

つくったテストページはこちらです。

Vou-routerテストページ

こんな画面です。

画面上メニュー内の、HomeとAboutを押す事で、

スムーズにページが入れ替わることがわかるのではと思います。

アオキ
ページの読み込みがほとんど感じられないんですよね、すごい。
Sponsored link

『Vue.js』で『SPA』をつくる手順

大まかな流れはこんな感じです。

  1. 『Node.js』インストール
  2. 『Vue CLI』インストール
  3. 『Vue.js』インストール
  4. 『Bulma』インストール
  5. フォルダ・ファイル構成確認
  6. 各ページ作成・Vou-router調整
  7. 仕上げ

『Vue.js』で『SPA』をつくる下準備

『SPA』なホームページをつくるために、まずは『Node.js』をインストールします。

https://nodejs.org/ja/

『Node.js』がインストール成功するとコマンドプロンプトで、

>node -v
v10.11.0

>npm -v
6.5.0

などバージョンが表示されればOKです。

参考記事

続いて『Vue.js』をコマンドラインでインストールするためのツールである、

『vue-cli』をインストールします。

$ npm install -g vue-cli

インストールできたら、任意のフォルダに移動して、『Vue.js』をインストールします。

$ vue init webpack vue-router-test

webpack(ウェブパック)・・『JavaScript』や『Sass』などを一つのファイルにまとめてくれる画期的なツール

インストールが始まると、初期設定の情報が表示されるので、全部エンターキーを押して進めます。

Project name エンター
Project description エンター
Author エンター
Runtime エンター
Install vue-router エンター
Use ESLint to link your code エンター
Standard エンター
Setup unit tests エンター
Jest エンター
Setup e2e tests with Nightwatch エンター
Yes, use NPM エンター

# Project initialization finished!

と表示されればOKです。

$ cd vue-router-test

で作成したフォルダに入りつつ、

見た目も大事っしょって事で、

最近じわっと人気がでている『bulma(ブルマ)』もインストールしてみます。

bulma・・よく使う機能を集めた手軽でオシャレなCSSフレームワーク

$ npm install bulma

『bulma』は『Sass』で書かれているので、『Sass』を使えるようにするためのライブラリもインストールします。

Sass・・CSSを効率よく書けるようにした方法。

$ npm install sass-loader node-sass –save-dev

ここまできて、ようやくメインの『Vue.js』+(たくさんのソフト)をインストールします。

$ npm install

『package.json』というファイルに必要なソフトがずらりと書かれていて、

それらのソフトが、『node_modules』というフォルダにまるっとインストールされます。

無事インストールできたら、

$ npm run dev

とコマンドをうって、

http://localhost:8080

と表示されたら、グーグルクロムなどで

http://localhost:8080

を検索し、この画面が表示されればOKです。

アオキ
ここまでは下準備、長いっちゃあ長いけど何回かやってると慣れてきまっせ。
Sponsored link

『Vue.js』で『SPA』をつくるためのフォルダ構成

『Vue.js』で『SPA』をつくるイメージはこんな感じです。

たくさんのファイルがつながっているんですよね。

『src』フォルダの中にたくさんのファイルを作成していきます。

まず、『main.js』というファイルが、『App.vue』と『router』をインポートしています。

『router』フォルダの中の『index.js』というファイルが『vue-router』の本体になります。

新たに 『pages』というフォルダをつくって、その中に ページファイル(今回だと Top.vue とか About.vue とか) を作成します。

コンポーネント・・部品という意味。Vue.jsはコンポーネントを組み合わせてホームページをつくることができます。拡張子は .vue です。

『vue-router』によって、『pages』フォルダ内の各ファイルを振り分けます。

アオキ
サッカーでいったら司令塔的な。柴崎や遠藤的な役割ですかね。

『pages』ファイル(コンポーネント)の中で、
必要があればより小さな『components』を作って読み込ませることもできます。

それではソースコードをば。

Sponsored link

『Vue.js』で『SPA』をつくるためのファイル群

main.js

初期設定のままでOK。
『App.vue』と『vue-router』が読み込まれるように設定してあります。

App.vue

『App.vue』の中の、 という箇所の中で、

司令塔『vue-router』がページを振り分けます。

また、どのページでも共通で使うような部品(例えばメニューやフッターなど)は、

『App.vue』に書いておくと全ページで共通で使用されます。

(今回の場合は Navbarコンポーネントを作って、 を読み込ませています。

司令塔 vue-router router/index.js

インストール時は『pages』フォルダはないのでつくっておきます。

ページ pages/top.vue

ページ pages/about.vue

共通で使う Nabbarはcomponentsフォルダに保存します。

『bulma』サイトにあるサンプルをちょっとだけ改良してます。

components/Navbar.vue

肝はRouterLink という箇所。

RouterLink to=”/” でトップページ、
RouterLink to=”/about” でAboutページへジャンプするように指定していて、

を合図に、司令塔『vue-router』がページに振り分けられます。

この段階で、 コマンドラインで npm run dev とうって、

http://localhost:8080/

http://localhost:8080/about

とうってページが切り替わればOKです。

開発時は npm run dev で試して、

本番用にファイル生成するには、npm run build とうつとOKですが、一点注意したい点があります。

Sponsored link

『Vue.js』で『SPA』をつくるための注意事項

npm run build とうつと、

たくさんのファイルが『webpack』によって、distフォルダにまとめてくれます。

が、

初期設定だとなぜか生成されたファイルのパスの位置が違って、

画面真っ白という事になりがちなのです。

アオキ
僕は初期の頃 相当ハマりました・・

対策としては、設定ファイル config/index.js の46行目あたりの

アオキ
サーバーのルートディレクトリに置くのを想定してるみたいです。

仕上げ、は『bulma』の公式ページを見つつパーツをコピペしていくとだいぶ綺麗なサイトがつくれるようになります。

最後にもう一度テストページをば。

Vou-routerテストページ

アオキ
それにしても、読み込みスピードほとんどなくスムーズに動くっていいですね。
アオキ
これからもっと頻度あげてSPAつくりをやっていきたいもんです。
created by Rinker
¥3,650 (2019/06/19 05:39:03時点 Amazon調べ-詳細)
created by Rinker
¥3,694 (2019/06/18 21:16:20時点 Amazon調べ-詳細)

『Vue/Vuex/Nuxt』ではこんな記事も読まれています。

1. Vue.jsとFirebaseで作るミニWebサービス を試してみた〜Googleログインまで〜

2. 【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

3. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

4. LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

5. Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

6. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. Vue.js

    Vue.jsとFirebaseで作るミニWebサービス を試してみた〜Googleログインまで〜

    プログラミングにどっぷり取り組むようになってからというもの、いわゆ…

  2. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  3. Laravel

    LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

    ここ数年、ユーチューブで見れるプログラミング動画が増えています。し…

  4. Laravel

    【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【np…

    ロリポップやXサーバーなど、格安のレンタルサーバーでも運用できるプ…

  5. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  6. Vue.js

    【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

    先日、『オトナのVue.jsとNuxt.js入門ハンズオン@未来会議室…

Sponsored link

最近の記事

Sponsored link
  1. 物理学

    物理とプログラミングの関係〜力学のはじめのいっぽ
  2. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. プログラミング

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  4. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング
PAGE TOP