Vuetifyの画面レイアウトテンプレを使う話

本記事の目的

Vuetifyの画面レイアウトテンプレの適用方法についてまとめる

Vueのアプリを作るにしても、画面レイアウトのテンプレを使いたい
＃「俺が作った最強の画面レイアウト！」ではなく、世界のデザイナーが考えたレイアウトを利用すべき、これは絶対に
↓
Vuetifyの画面レイアウトのテンプレ（wireframes）があるじゃん
↓
使おう

ということでそのやり方を本記事をまとめます

[Vuetify]>[wireframes]にサンプルがいくつかあるから好きなものをチョイス
- Vuetify -wireframes-
今回はbaseってのを使っていく
＃base以外のテンプレ一覧はVuetifyのテンプレ一覧にまとめておく
所定の画面を見つけたらGitHubへ
Rawで表示
[名前を付けて保存]で任意の名前に変更して、自分が作っているアプリの.vueを置いている場所に保存
Vueのvue createでデフォルトアプリから作ってる人ならsrc/components/配下ですかね
HelloWorld.vueは使わないので消していいです
App.vueを今作成したvueファイルを参照するように修正
白すぎるので分かりにくいけどnpm run serveで確認すると下図の感じ
＃Vuetifyのデモページはdarkモードだけど、自分のアプリはdarkモードに設定していないからデフォルトの白になってます
余談だけど、darkモードに変更するには、plugins/vuetify.jsのthemeのdarkプロパティをtrueにしてあげれば良い
1
2
3
4
5
export default new Vuetify({
theme: {
dark: true
}
});

以下にVuetifyのテンプレをまとめておく。毎回サイトまで行って確認してもいいけど一覧化されてる方がわかりやすいかなと。

Base.vueという名前のまま一旦画面確認しようとnpm run serveすると、eslintのvue/multi-word-component-namesが発生
「コンポーネントの名前は複数単語で命名せよ」というルール
login.vue（ログイン画面）とかどうすんねん、と思ったけど、まぁ今回は1つの単語からなるコンポーネント名にしようとしていなかったので一旦このままでいく
もし今後1つの単語で名付けたいコンポーネントが出てきたらその時は.eslintrc.jsに下記追記しよう
1
2
3
rules: {
'vue/multi-word-component-names': 'off', // 追加
},
あと絶対darkモード切り替えの話を本記事でするべきではなかった、それは自分が一番分かってる
なのでいつか外だししよう、いつかね