あまり記事がなくて、すごく回り道をしたので同じような悩みを持つ方へのメモ
vue3 vuetify3の最小構成について
npmとかvue cliとか迷宮に迷い込みやすいですね。。。。
とりあえず、自分でコード書く部分は最小構成あれば2ファイルで。vueとvuetify動きます。
/static/index.html
/static/index.js
index.htmlで適切なCDNを指定すれば、2ファイルで動きます。
公式サイトだとvuetify3のCDNなかったり、vueのサンプルCDNいつのまにか
vue3になったりと、回り道しました。
具体的なソース
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@3.0.0-beta.3/dist/vuetify.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 id="inspire">
<v-navigation-drawer v-model="drawer" app>
<!-- サイドメニューバー -->
<v-expansion-panels>
<v-expansion-panel
v-for="i in 3"
:key="i"
title="Item"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
></v-expansion-panel>
</v-expansion-panels>
</v-navigation-drawer>
<v-app-bar app>
<!-- ヘッドバー -->
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
<div class='foo' style='margin-left: auto;'>
</div>
</v-app-bar>
<v-main>
<!-- メインコンテンツ -->
<v-row no-gutters>
<v-col v-for="n in 25" :key="n">
<v-card width="300" height="600" outlined></v-card>
</v-col>
</v-main>
</v-app>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuetify@3.0.0-beta.3/dist/vuetify.js"></script>
<script src="/static/index.js"></script>
</body>
</html>
index.js
vuetify = Vuetify.createVuetify({
theme: {
defaultTheme: 'dark'
}
});
const test1 = {
data() {
return {
visual: false,
info: {
name: "",
nickname: "",
gender: "",
},
drawer: null,
};
},
};
app = Vue.createApp(test1);
app.use(vuetify);
app.mount("#app");
もう少し補足
vuetify3公式のページでCDNの提供が無いですが、以下のページでCDN提供されているので、
適時最新のvuetify3を使うと良いと思います。
ぐち
vue2とvue3で構文が変わってる関係で、ネットの情報がそのまま使えなかったです。
vuetify3はCDNの提供が無いし。一応npmで環境構築したんですが、私はフロントエンド開発したいんじゃなくて
Webアプリの画面お手軽に作りたいだけなんですよ～～～
フロントエンドのためのbuildとかやりたくない。。。。。