Vue.js/個人サイトを作ってみる/020_Vuetifyを動かす

とりあえず Vuetify を駆動させてみる。

Quick Start — Vuetify.js このへんのサンプルに従う。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Hello</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div id="app">
        <v-app>
            <v-content>
                <v-container>Hello world</v-container>
            </v-content>
        </v-app>
    </div>
</body>
</html>

index js はこうなる。単に Vue を駆動させてテンプレートをコンパイルして再描画するためだけなので中身は何も無い。

document.addEventListener("DOMContentLoaded", function(e){
    console.log("vue start");
    new Vue({ el: '#app' })
});

この v から始まるタグが Vuetify のコンポーネントらしい。

Material Component Framework — Vuetify.js

にあるように、Vuetify というのは部品をつまみ食いするコンポーネントではなく Bootstrap のような全体の枠組みであるということだ。それをやるには一番外側に v-app が必ず必要になるということだ。

v-content は HTML ならば main に相当し、主となるコンテンツが格納されるブロックになる。v-app の中に入ることによって、サイズやレイアウト的な制御の恩恵をうけることができるようだ。

v-container は v-content 内部のさらに細かいブロックで、これも配置等の制御が入る。

何をやっているかがだいたいわかったので、実行してみると。画面に

Hello world

と表示されることがわかる。

とりあえず Vuetiry が駆動できたことがわかった。

javascript/vuejs/create_my_site_with_vuetify_and_vue_router/020_hello_vuetify.txt · 最終更新: 2019-01-31 11:24 by ore

文書の先頭へ

Vue.js/個人サイトを作ってみる/020_Vuetifyを動かす

menu

書いてる野郎

Vue.js/個人サイトを作ってみる/020_Vuetifyを動かす