Vue.jsでSPAを制作する

今回vue.jsにVuexとVueRouterを追加して、SPAを制作していきます。

今回使用するVueCLIというコマンドライン機能を使えば、30分もかからずにVue.jsでSPAを作る土台を整えることが出来ます。

VueCLI・Vuex・VueRouterというVue.jsでSPAを作るときに必須の３つのライブラリを使用して、Vue.jsアプリケーションの作り方を解説いたします。

Vue-CLIでVueアプリケーションの土台を作る

もし、VueCLIがローカルマシンにインストールされていない場合

npm i -g vue-cli

をターミナルで実行して、VueCLIをグローバルインストールしてください。

VueCLIを使って、Vueアプリケーションの土台を作ります。プロジェクトを作成したディレクトリに移動して

vue init webpack-simple <プロジェクト名>

すると、以下のようなファイル構成のプロジェクトディレクトリが出来ますので、

プロジェクトディレクトリ
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

プロジェクトディレクトリの中に入って、

npm i

コマンドを叩き、node_modulesをインストール。

これで、Vue.js単体の最小構成のアプリケーションが出来ました。プロジェクトディレクトリ内で

npm run serve

と入力すると、以下のような画面がブラウザに表示され、Vueアプリケーションが立ち上がります。

VueRouterでルーティング処理を可能にする

Vueアプリケーションの雛形ができたところで、Vue.jsのSPA上でページ遷移を可能にするVueRouterをセットアップしていきます。まずは、vue-routerをインストールします。

npm i -S vue-router

インストールが完了したら、srcディレクトリ配下のmain.jsを

main.js

import Vue from 'vue';
import VueRouter from 'vue-router'; /*VueRouterをインポート*/
import App from './App.vue';
import { routes } from './routes'; /*routes.jsをインポート(ルート情報を書き込むファイル)*/

Vue.use(VueRouter); /*VueRouterをVueのミドルウェアとして使用する宣言*/

const router = new VueRouter({   /*routes.jsの情報をVueRouterに入れる*/
  routes
});

new Vue({
  el: '#app',
  router,   /*Vueをインスタンス化する際にrouterを渡す*/
  render: h => h(App)
})

に変更

次に、ルーティング情報を記載する「routes.js」ファイルをsrcディレクトリ配下に作成して、そのファイル(src/routes.js)を以下のように記載

routes.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Work from './views/Work.vue';
import Skil from './views/Skil.vue';
import SkilFront from './views/SkilFront.vue';
import SkilBack from './views/SkilBack.vue';
import SkilOther from './views/SkilOther';
import ContactForm from './views/ContactForm.vue';

Vue.use(Router)

export default new Router({
    mode: "history",
   routes: [
       { path: '/', component: Home},
       { path: '/skil', 
         component: Skil,
         children: [
             { path: "Front", component: SkilFront},
             { path: "Back", component: SkilBack},
             { path: "Other", component: SkilOther,}
         ]},
        { path: '/profile', component: Profile},
        { path: '/work', component: Work},
        { path: '/contact', component: ContactForm},
        ]
});

・必要なコンポーネントをインポート(今回はComponentディレクトリの中にHome.vue,Profile.vue,Work.vueなどと作成)

・インポートしたコンポーネントを表示したいパスと結びつける

今回はプロフィールSPAを作成するつもりなのでHome,Skill,Profile,Work,Contactそれぞれをルーティングするためにこのように設定。
必要なコンポーネントをインポート(今回はComponentディレクトリの中にA.vue,B.vue,C.vueと作成)

最後に、routes.jsで設定したコンポーネントを表示する場所を記載しましょう。
App.vueを

App.vue

<template>
  <v-app>
    <v-content>
      <header-menu></header-menu>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
import HeaderMenu from './views/HeaderMenu.vue'
export default {
  name: 'App',
  components: {
    HeaderMenu,
  },
  data: () => ({
    //
  }),
};
</script>

に変更してください。

そうすると、「router-view」と記載された部分に、routes.jsで設定したコンポーネントが表示されるようになります。

ここまで作った状態で、「http://localhost:8080/#/a」にアクセス

最後に

次回はここにVueXを導入していきます。