Vue.jsの使い方【完全版】SEOフレンドリーなアプリを作る！

8,637 views

読了時間 : 約2分2秒

Vue.jsとは何でしょうか？

Webインターフェース作成のための、軽くて進歩的なJavaScriptのフレームワークです。

本記事では、Vue.jsの実例をご紹介します。SEOフレンドリーなeコマースのアプリです。

1．環境設定

まず、vue-cliを使ってVueアプリの足場を作っていきます。

これにより、vue-loaderを使い、基本的なコンフィグを含むvue-snipcartフォルダを作成します。同時に、単一ファイルコンポーネントの作成が可能になります。

このデモをよりリアルなものにするために、vuex、vue-router、prerender-spa-pluginの三つのモジュールを追加します。

新しいvue-snipcarプロジェクトフォルダに行き、以下のコマンドを実行してください。

さらに以下の四つのパッケージをインストールします。

それでは全てを組み立てていきます。まずvuexストアからです。これを使い製品情報の保存／アクセスを行います。

srcフォルダに、3つのファイル(state.js/getters.js/index.js)と共に　ストアフォルダを作ります。

製品のリストがあるホームページと、各製品の詳細ページを作ります。そのために、2つのルートを登録します。

ここでは、ストアとルーターをアプリに登録します。src/main.jsを以下のようにアップデートします。

データを見せるために、以下の3つのコンポーネントを使用します。

Home…製品リストの表示

Product…各製品のためにHomeコンポーネントにより使用される

ProductDetails…各製品ページ

App.vueファイルを開き、更新するため以下のスクリプトを実行します。

そして最後にsrcフォルダに新しいフォルダを作成し、index.htmlファイルをそこに移動し、更新します。

vue①

プリレンダリングは簡単にクローラー可能な軽くて早いフロントページの維持に役立ちます。webpackファイルへ行き、以下の宣言をトップレベルエキスポートに加えます。