Hello Vuetify
By on Sep 5, 2018
Vuetifyのはじめの一歩
Bootstrapを使っていたのですが、他のUIフレームワークも使って見たいので、「Vue.js + vuetify + vue-cli でマテリアルデザインにトライ!」を見ながら、作業する。
vue-cliはインストールされている前提:
プロジェクトを作成する
プロジェクトへの質問はデフォルトで良い
$ vue init webpack-simple vuetify-test ? Project name vuetify-test ? Project description A Vue.js project ? Author shoko_kb <*********@gmail.com> ? License MIT ? Use sass? No vue-cli · Generated "vuetify-test". To get started: cd vuetify-test npm install npm run dev
パッケージをインストールする
$ cd vuetify-test/ $ yarn install success Saved lockfile. ✨ Done in 172.19s.
動作確認
$ yarn run dev yarn run v1.6.0 warning ../../../package.json: No license field $ cross-env NODE_ENV=development webpack-dev-server --open --hot Project is running at http://localhost:8080/ webpack output is served from /dist/ 404s will fallback to /index.html
Vuetifyを追加する
$ yarn add vuetify
main.jsにimport vuetifyを追加する
import Vue from 'vue' import App from './App.vue' // ---- ここから追加 ---// import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) // ---- ここまで追加 ---// new Vue({ el: '#app', render: h => h(App) })
index.html にマテリアルアイコンを追加する
<head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> </head>
App.vueにチェックボックスとカレンダーを追加してみる
<template> <div id="app"> <img src="./assets/logo.jpg"> <h1>{{ title }}</h1> <!--h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul--> <v-layout row wrap> <v-flex sm3> <v-checkbox hide-details label="Landscapes" v-model="landscapes"></v-checkbox> </v-flex> <v-flex sm3> <v-checkbox hide-details label="Reactive" v-model="reactive"></v-checkbox> </v-flex> </v-layout> <v-date-picker v-model="picker" :landscape="landscape" :reactive="reactive"></v-date-picker> </div> </template> <script> export default { name: 'app', data () { return { title : 'My Vuetify Hello World', msg: 'Welcome to Your Vue.js App', picker: null, //new Date('2018-09-01'), landscape: false, reactive: false } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
- カレンダーの日付をクリックすると数字が消える(用調査)