Vue js Vuetify導入について
Vue cliでプロジェクトをcreateする方法はこちら参照
https://qiita.com/H-Toshi/items/2dbd9f72d28815a67924
作成したプロジェクト内で
ターミナルを開き
でプロジェクトを作成可能
インストールすると作成したフォルダが書き換えられる。
成功するとトップページの表示が切り替わる
App.vueの初期表示は以下
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
width="100"
/>
</div>
<v-spacer></v-spacer>
<v-btn
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<HelloWorld/>
</v-main>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>
自分のプロジェクトを作る場合ここの不要な部分を削除して作っていく
不要な部分を削除した状態が以下
↓
App.vue(編集後：最低限の記述を残した物）
<template>
<v-app>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
不要な部分を削除した状態が以下
削除の内容は
<template>
<v-app>
</v-app>
</template>
上記v-app内の記述
scirptタグ内は初期のHelloworldのimportとcomponentsの記述を削除している。
v-app内にvuetify公式のApp-Barなどをコピペで入れられる。
https://vuetifyjs.com/ja/components/app-bars/
テンプレートの右上からコードをコピーして
v-app内に貼り付ければ使用可能
