More than 3 years have passed since last update.

npm不要どころかHTML1つだけでVueとVuetifyが試せるテンプレート

Last updated at 2021-10-17Posted at 2018-10-27

すぐつかえます

Vuetify使ってみたいなぁ、Vuetify使ってる本番に手入れする前にちょっとUI実験したいなぁ、、というわがままな俺のために、CDNを使ってすぐにVueとVuetifyで遊べるSandboxテンプレートを用意しました。

テンプレート（HTML）

template.html


<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">

    <!-- ここから -->

    <v-app>

        <v-system-bar app>
            Single HTML Template
        </v-system-bar>

        <v-navigation-drawer app>
            <v-sheet>
                Hello!
            </v-sheet>

            <v-divider></v-divider>

            <v-sheet>
                Left Bar
            </v-sheet>
        </v-navigation-drawer>

        <v-main>

            <v-toolbar></v-toolbar>

            <v-container fluid>

                <h1 class="display-3">GYU-DON</h1>

                <div class="display-1">{{message}}</div>

                <v-chip close v-model="chip1" @click="onChipClick" @input="onClose">
                <v-avatar>
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                </v-avatar>
                GYUDON MAN
                </v-chip>

            </v-container>

        </v-main>

        <v-footer app>hoge</v-footer>

    </v-app>

    <!-- ここまで！ -->

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                message: "this is the best of food.",
                chip1: true
            },
            methods: {
                onChipClick: function(ev) {
                    this.message = "YOSHINOYA is better.";
                },
                onClose: function(ev) {
                    this.message = "good night.";
                }
            }
        });
    </script>

</body>
</html>

変更履歴

2021/10/17 Vuetify v2.5.10 対応
2020/12/18 Vuetify v2.3.21 対応
2019/9/7 Vuetify v2.0.15 対応
2019/2/16 v-chips でコンポーネント利用のイメージがつきやすくなっていい感じ
2019/2/16 v1.5.1 対応

参考

https://jp.vuejs.org/v2/guide/index.html
https://vuetifyjs.com/ja/getting-started/quick-start

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up