top of page
  • 執筆者の写真T sakurako

VueでWEBアプリ(2)

今回は、前回触りだけやったVueを用いたWEBアプリ作成の続きです。

やったことは以下の3つです。

  • Vue UIの使用

  • Vuetifyインストール

  • 前回作成したWEBアプリにメニューを追加


一応目指しているのは、データ一覧があって、メニューがあって、詳細画面がある感じのものです。


実は今回結構ポカをしていて、本来想定していた手順とは違うことをすることになってしまいました。

先日Vue CLIでWEBアプリを作成したのですが、そのあとによくわからないままVuetifyを入れたのでなにがなにやらになってしまい…。

初心者のぐだぐだの記録・備忘録です。


あと、今更ですがUbuntu 18.04.4を使用してます。

 

Vue UIの使用


Vue UIはVue CLIのプロジェクト作成・管理UIです。GUIとして扱えます。

入れることになった経緯が、そもそもVuetifyを入れようとしたからなんですよね…。



こちらのサイトにて、Vuetifyはデザインするのに便利だということで入れてみようと思いまして、サイト内のURLから次は



Vuetifyドキュメントに飛びまして。

ここで、Vue UIでVuetifyをインストールする方法をとったので、Vue UIを使用することになりました。(一番上に書かれていたので…)



Vue UIを用いて作成したプロジェクトしか表示されず最初は焦りましたが、

Vueプロジェクトマネージャ画面の「インポート」から、それ以前に作成したプロジェクトをインポートすることができます。

(上の画像では切れてしまっていますが、画面左下にホームのマークがあり、そこからVueプロジェクトマネージャ画面に行けます。)


ダッシュボードなどはまだ全然利用していないのでピンと来ていないのですが、プラグインの管理がわかりやすくなってよてもいいと思いました。プラグインの検索もできるのが特に便利だと思いました。





Vuetifyインストール


Vue UIでVuetifyのプラグインをインストールしました。

その後以前作成したWEBアプリを開いてみると

Vuetifyプロジェクトの初期画面に上書きされてしまっていたので…



作り直しました。いや本当に手順とか計画性って大事です。





前回作成したWEBアプリにメニューを追加


メニュー追加の参考サイトはこちらです。


<v-app>タグ内を編集する時、

App.vueの

 <v-main>
 <HelloWorld/>
 </v-main>

この記述を消してしまい、エラーが出てしまうということがありました。これは前回参考にした分のコードですね。


App.vueはこんな感じになっています。

<template>
 <v-app>
 <header>
 <v-app-bar
 app
 dark
 >
 <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
 <v-toolbar-title>VueAppTest</v-toolbar-title>
 </v-app-bar>
 <v-navigation-drawer
 v-model="drawer"
 fixed
 temporary
 >
 <v-list
 nav
 dense
 >
 <v-list-item-group>
 <v-list-item>
 <v-list-item-title>HOME</v-list-item-title>
 </v-list-item>
 <v-list-item>
 <v-list-item-title>ABOUT</v-list-item-title>
 </v-list-item>
 <v-list-item>
 <v-list-item-title>WORK</v-list-item-title>
 </v-list-item>
 <v-list-item>
 <v-list-item-title>SERVICE</v-list-item-title>
 </v-list-item>
 <v-list-item>
 <v-list-item-title>BLOG</v-list-item-title>
 </v-list-item>
 <v-list-item>
 <v-list-item-title>ACCESS</v-list-item-title>
 </v-list-item>
 </v-list-item-group>
 </v-list>
 </v-navigation-drawer>
 </header>
 <v-main>
 <HelloWorld/>
 </v-main>
 </v-app>
</template>

<script>
import HelloWorld from './components/Users.vue';
import constants from './common/constants'

export default {
 name: 'App',

 components: {
 HelloWorld,
  },

 data () {
 return {
 drawer: false,
 menuItems: constants.menuItems 
    }
  }
};
</script>





<v-app-bar-nav-icon>が表示されない


メニューアイコンが表示されていなかったので

こちらを参考にアイコンフォントモジュールのインストールもインポートもしたのですが、今度はコンパイルエラーが出て、ページの表示すらできなくなってしまいました。

Failed to compile../src/plugins/vuetify.js
Module not found: Error: Can't resolve '@mdi/font/css/materialdesignicons.css' in '/home/(user)/vue_apptest/vueapp/src/plugins'

結局、node_modulesの中の@mdiフォルダから

@mdi/font/css/materialdesignicons.css

こちらのパス通りのファイルがちゃんと存在するか確認するために一度materialdesignicons.cssを開いてみたら、コンパイルエラーは出なくなり、アイコンは表示され解決しました。




 


どうだったか


計画性もなくやり直しなりエラーなりでぐっだぐだになってしまいましたが、とりあえずメニュー表示まではできました。

フレームワークを用いてWEBアプリを作成するのはちょっと久しぶりで(最近ノーコードとかしかやってなかったので…)なんとなく感覚が取り戻せてきた気がします。


実はVuetify初期画面になってしまい前回のやり直しをしたとき、なぜかページがいつまでたっても表示されないという事態になっていました。

 Note that the development build is not optimized.
  To create a production build, run npm run build.

このようなメッセージが出ていたのでnpm run buildしてみても変わらず…という状態でしたが、の次の日になるとちゃんと表示されていました。


アイコン非表示・エラー問題といい、こういったことはVueだとよくあるのでしょうか?

私は考えすぎる癖があるので、解決策が結構基本的だったり小難しい事態でないということも頭に入れつつ勉強を進めていきたいです。




記事: Blog2_Post
bottom of page