このページへのアクセス
今日: 1 / 昨日: 0
総計: 2
文書の過去の版を表示しています。
Vuetifyでは、ヘッダーはtoolbarという名前になっています。フッターはfooterです。
https://vuetifyjs.com/en/components/toolbars
https://vuetifyjs.com/en/components/footer
Vue.js用マテリアルデザインフレームワークVuetify
02.codesandboxのvue.jsでvuetifyのテンプレート
03.codesandbox上でVue.js-VuetifyでCard
04.CodeSandboxでVuetifyを用いたフォーム作成
https://codepen.io/kematzy/pen/oMgrjE/をCodeSandboxで写経してみます。
CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。
以下のようになります。
ソースコード
https://codesandbox.io/s/14ry9r3lll
外観
途中。
以下のLayoutsの“Baseline”を、CodeSandboxで記載してみたいと思います。
index.htmlの追加コード
// </head>の直前に以下を挿入 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>
src/main.jsの追加コード
import Vuetify from "vuetify"; import "vuetify/dist/vuetify.css"; Vue.use(Vuetify);
上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できます。
https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/layouts/baseline.vue
のコードを、src/App.vueにコピペします。
しかし、これでは、Contactをクリックしても、Contactページに飛びません。。。
src/router.js
import Vue from 'vue' import VueRouter from 'vue-router' //プラグインとして登録 Vue.use(VueRouter)
src/main.jsに追加するコード
import router from './router' // new Vueの中に記載 router,