2019.10.7
Vueでカクテルデータベースをリファインする話#9【UIフレームワーク】
カクテルDBリファイン計画ですが、主な目的が9割自分の技術スキル向上のためなんですけど、とはいえこれ使ってもらえるシステムにしたいという欲はちゃんとあるわけで。あと、お酒に興味がある層をフォローしている趣味アカウントとの親和性は高いので、よりよい形で実現したいわけです。
で、よりよい形にするためにはインターフェースをそれなりにちゃんとしたものにしなくてはならないんですが、ある程度ちゃんとしたものを作ろうとするとUIフレームワークというものに頼らざるを得ません。一人で1から10まで実装しようとすると死んでしまいます。
ということで、今回はbootstrapのようなやつで、Vueで使いやすそうとされているUIフレームワークを試してみたいなって思います。
で、その中で軍を抜いて有名なのがVuetifyというフレームワークだったので、これを用いてカクテル検索画面のポップアップを実装してみたいなって思います。
ポップアップ、この場合はモーダルって言ったほうがいいと思うんですけど、調べてないけどさすがにないわけないのでこのまま話を進めます(笑)
じゃあまず導入ですね。
このVuetifyは、いわゆるマテリアルデザインっていいまして、全体として統一されたデザインをベースにしていく、っていうUIフレームワークですので、部分的に導入するっていうよりかは全体としてごっそり入れて、それから手を加えていく、みたいな作り方をします。なのでbootstrapとかよりは少し導入は大変かな。
とはいえ、初心者でも使えるフレームワークであることは確からしいので、それを信じて導入してみましょう。
ってなわけで、ぶっこんでしまいましょう(笑)
で、かれこれ1日格闘してるんだがなっっっっかなか上手くいかん･･････
公式ドキュメントがまずわかりにくいので、インターネット上の文献を検索しようとしても、どれもなに一つうまくいかん･･････
これがね･･････解決できないんですよね･･････。初期化ができてません、と。
ドキュメントを見ろとか書いてるんですけど、まずどこのことを指してるのかがいまいちわからんし、しょうがないので書いてあることを雑にやったら何の進歩もしないしストレスフルです･･････プログラミングのこういうところがきらい････････････
最初からLaravelに組み込んでくれてるらしいやつとかいろいろあったんですけど、どれも何らかの事情でうまくいきません･･････原辰徳だ･･････････････････
で、苦闘の末、かろうじてボタンを入れることができました･･････。
window.Vue = require('vue');
import Vuetify from 'vuetify';
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store'
import routes from './routes.js';
require('./bootstrap')
Vue.use(VueRouter)
Vue.use(Vuetify);
const opts = {}
const vuetify = new Vuetify();//←これが重要らしい
export default new Vuetify(opts)
const router = new VueRouter({
mode: 'history',
routes: routes()
});
const app = new Vue({
store,
router,
el: '#app',
vuetify//で、これを入れる
})
とりあえずこれで動くことには動きました。結局どれが必要だったのかはよくわかりません。いろいろnpm経由でインストールしまくったので･･････(笑)
ただ、app.jsの記述に関してはこんな感じで良さそうな感じはします。
これでやっといろいろ遊ぶことができそうですね。長かった･･････(笑)
疲れたので続きは次回(笑)(笑)