webpack前回、Webpackで構築したVue-cli環境でHelloWorldを編集する記事(下記関連記事)を紹介しましたが、今回は実際に新規にコンポーネントを作成し画面遷移までしてみたいと思います。関連記事Webpackを使ってVue.jsのSPA環境を簡単に構築をするどうも、こんにちわ。気づけば2019年もあっという間に3月ですね。この間年が開けたような気もするのですが。まとめ環境なお、今回の環境も前回に引き続き以下の通りとなります。sampleなお、本記事は前回の内容を踏襲して、追記していくかたちになるので前回の内容も簡単に目を通しておいてもらえるとわかりやすいかと思います。新規にコンポーネントを作成するでは、まずは新規にコンポーネントを作成していきたいと思います。現状、「/sample/src/components/」ディレクトリにはHome.vueというファイルのみ存在している状態ですが、このHome.vueファイルをコピペして新規にコンポーネントを作成していきます。コピペしたら、ファイル名を作成したい画面の名称に変更します。今回はAbout画面を想定して「About.vue」という名称にしたいと思います。2つだけでは寂しいので、再度コピペしてもう1つコンポーネントを作成します。1つの名称はとりあえず「Sample.vue」というファイル名にしておきます。これで、componentsディレクトリ内に下記3つのフィアルが存在している状態になると思います。componentsディレクトリ内ファイルHome.vueAbout.vueSample.vue作成したコンポーネントを編集する続いて、新規に作成コンポーネントファイルをそれぞれ下記のように編集していきます。48px;}</style>それぞれHome.vueファイルの内容を名称に沿って変更した感じです。ルーティングの設定コンポーネントファイルを新規に作成したら、続いてルーティングの設定をしていきます。ルーティングは前回説明したように「/sample/src/router/index.js」ファイルで設定します。今回は「About」と「Sample」というコンポーネントを作成したので下記のように編集します。Sampleコンポーネントを設定}]})一応追記した部分は分かるようにコメントアウトで記載していますが、4行目と5行目、それから16〜25行目が追記した箇所になります。開発環境を起動して画面の確認ルーティングの設定までしたら、下記コマンドで一旦開発環境(http://localhost:8080)を起動して画面の確認をします。devAbout画面About画面は「/about」というパスでルーティング設定をしたので、「http://localhost:8080/#/about」にアクセスすることで表示されると思います。Sample画面Sample画面も同様なので、「http://localhost:8080/#/sample」にアクセスすることで表示されると思います。App.vueを編集して遷移遷移それぞれ問題なく表示されていることを確認したら、「/sample/src/App.vue」ファイルを編集してボタンを設置して画面遷移できるように実装していきます。そもそもApp.vueはどんなファイルなのか?まず、現状(デフォルト)のApp.vueファイルを見ていきましょう。60px;}</style>デフォルトでは、このような感じになっています。そもそも、このApp.vueファイルはどのような役割を果たしているかと言うと、ルートファイルのような役割になります。全画面共通で使うテンプレート(ヘッダーやフッター等)の類はこのファイルに記述したり、jsやcssに関しても全体で共有したいものに関してはこのファイルに記述していくかたちになります。現在、「Home」と「About」、「Sample」というコンポーネントを作成している状態ですが、それぞれにVue.jsのロゴが表示されていると思います。このロゴ画像はこのApp.vueの3行目にあるimgタグの部分になります。このことからもルートのような役割を果たしていることが分かるかと思います。4行目に「」というタグがあると思うのですが、この部分が各コンポーネントを呼び出す働きをする部分になります。簡単にApp.vueがどのようなファイルなのか分かったところで、実際にリンクボタンを設置していきます。リンクは「router-link」というコンポーネントを使って設置します。aタグでももちろん作成することは可能ですが、公式のリファレンスにも記載されている通り管理する上「router-link」のほうが好ましいので特別なことがない限り「router-link」で設置しましょう。今回は適当に各コンテンツが読み込まれる「」の下にリストスタイルで下記のように設置してみます。20px;}</style>こんな感じですね。6〜8行目にそれぞれリンクボタンを設置しました。この状態で、「http://localhost:8080/#/」にアクセスしてみると下図のような感じになっていると思います。設置したボタンが表示されていますね。このリンクボタンをクリックすればそれぞれのコンテンツが表示され、URLもそれに応じて変わることが確認できるかと思います。まとめということで、今回はWebpack(Vue.js)環境で基本的には画面遷移を構築する方法を紹介させていただきました。Vue.jsだとこのように画面遷移もとても簡単に構築することができます。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。