Vue.jsとVueRouterとVuetifyでナビゲーション付きページのシンプルなサンプル

Vue.jsとVuetifyでマテリアルデザインなWebアプリをつくろうにもスタートダッシュでかなり躓くのでメモ

CDNのVue.jsではなく単体の.vueをwebpackでコンパイルする方でやります。

まずは各種モジュールのインストール

次にindex.htmlを編集

 

src/main.jsにvueを使う設定と、ルーティングを記載

今回はPagesフォルダにDashboardとSettingページを作り、それぞれ/と/settingでアクセスできるようにします

 

App.vueを編集 VuetifyjsのExampleのGoogle Contactsを参考にしました

Pages/Dashboard.vueを以下のように

Pages/Setting.vueを以下に

これであとは

してindex.htmlにアクセスすれば以下のようなページが完成しているはずです