【入門編】Webpackを使って構築したVue.js（vue-cli）のHelloWorldを編集する

　先日、Webpackを使用してVue.jsのSPA環境を構築し、実際にHelloWorld画面を表示する方法（下記記事参照）を紹介しましたが、今回は前回に続き、そのHelloWorldを実際に編集してみたいと思います。

環境

　なお、今回の環境は以下の通りとなります。

　なお、先日の記事で、Webpackをインストールして下の画面を表示するまでの過程を説明したので、そこまで環境が構築されているものとして話しを進めていきます。環境構築していない人は前回の記事を参照してください。

ディレクトリ構造

　では、まず今回使用するWebpack（Vue.js）の構造を簡単に確認します。sampleディレクトリを開くと色々なディレクトリやファイルがあるかと思います。

　それぞれの詳細は割愛しますが、プロジェクトの根幹、基礎となるファイル類は「config」、ビルド関連のファイルは「build」、各モジュールは「node_modules」といった感じでそれぞれ役割に応じたディレクトリ構成に分かれています。

今回編集するファイル

　こういったフレームワークの場合、実際に編集していくファイルは限られているのですが、今回も編集するのは下記ファイルのみになります。

　それぞれ全て「src」というディレクトリ内に格納されているファイルですが、Webpackにおけるコンテンツ作成は基本的に新規作成を含め編集はほぼこの「src」ディレクトリ内で作業していきます。

　今回編集するファイルが格納されている「components」と「router」ディレクトリに関して簡単に説明します。

componentsディレクトリ

　componentsディレクトリには、実際にHTMLやcss、jsを記述するコンテンツファイル（vue）を格納していきます。既に「HelloWorld.vue」というファイルが生成されていると思います。このファイルに記述されている内容が上の画像の内容になります。内容をみてみればHTML、css、jsが記述されているかと思います。なお、命名規則としてはアッパーキャメルケースになるので、そこだけ気をつけてください。

routerディレクトリ

　routerディレクトリにも既に「index.js」というファイルが生成されていると思いますが、このファイルがプロジェクト全体のルーティングの制御を行なっています。このファイルにコンポーネントをインポートして命名したり、パス（URL）を設定したりします。

　つまり簡単に言うと、作成したコンテンツファイルはcomponentsディレクトリに格納して、ルーティングはrouterディレクトリのindex.jsで制御するという感じです。

開発環境を起動

　とりあえず、簡単にディレクトリ構造を確認したところで開発環境を起動していきましょう。下記コマンドを実行します。

$ npm run dev

　起動したら「http://localhost:8080」にアクセスします。アクセスしたら冒頭の画像の内容が表示されると思います。

ルーティングを確認する

　今、アクセスしているのはルートになるのですが、そのルーティング設定は上で説明したように「/sample/src/router/index.js」ファイルで制御されています。このファイルを開いてみましょう。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

　色々記述されていますが、ポイントは3行目と10〜12行目になります。

　3行目でHelloWorldコンポーネントをインポートして、10〜12行目でパス（URL）と名前、コンポーネントをそれぞれ指定しています。

　つまり、簡単にまとめると「http://localhost:8080/（ルート）」に「/sample/src/components/HelloWorld.vue」ファイルを表示しますよと制御しているわけですね。

HelloWorldを編集する

　では、実際にHelloWorldを編集していきたいと思います。

ルーティングファイルを編集

　まず、今開いている「/sample/src/router/index.js」ファイルを下記のように「HelloWorld」から「Home」という名前に変更してみましょう。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // ここを編集

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',// ここを編集
      component: Home// ここを編集
    }
  ]
})

　変更して保存します。

HelloWorld.vueファイルを編集

　保存すると「Module not found」エラーが表示されると思いますが、ひとまず無視して「/sample/src/components/HelloWorld.vue」ファイルを「Home.vue」という名前に変更します。これでエラーは消えると思います。

　ファイル名を変更したら、実際に開いて下記のように編集して保存します。

　そうすると、これまで表示されていた内容が下の画像のように変更されると思います。

　問題なくHelloWorldを編集できましたね。

まとめ

　ということで、今回はWebpack環境のVue.jsの構造を簡単に把握するためにHelloWorldを編集してみました。至って簡単で何も難しいことはありませんが、これでWebpack環境のコンポーネントとルーティングの感覚がなんとなく掴めるのではないかと思います。

次回は、新たにコンポーネントを作成し画面遷移までする方法を紹介したいと思います。

　てことで、今回はここまで！また！