Hello Vuetify


Bootstrapを使っていたのですが、他のUIフレームワークも使って見たいので、「Vue.js + vuetify + vue-cli でマテリアルデザインにトライ!」を見ながら、作業する。


  1. プロジェクトを作成する

    • プロジェクトへの質問はデフォルトで良い

      $ 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
  2. パッケージをインストールする

    $ cd vuetify-test/
    $ yarn install
    success Saved lockfile.
    ✨  Done in 172.19s.
  3. 動作確認

    $ 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 初期表示

  4. Vuetifyを追加する

    $ yarn add vuetify 
  5. main.jsにimport vuetifyを追加する

    import Vue from 'vue'
    import App from './App.vue'
    // ---- ここから追加 ---//
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    // ---- ここまで追加 ---//
    new Vue({
      el: '#app',
      render: h => h(App)
  6. index.html にマテリアルアイコンを追加する

        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  7. App.vueにチェックボックスとカレンダーを追加してみる

      <div id="app">
        <img src="./assets/logo.jpg">
        <h1>{{ title }}</h1>
        <!--h2>Essential Links</h2>
          <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>
          <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>
        <v-layout row wrap>
          <v-flex sm3>
            <v-checkbox hide-details label="Landscapes" v-model="landscapes"></v-checkbox>
          <v-flex sm3>
            <v-checkbox hide-details label="Reactive" v-model="reactive"></v-checkbox>
        <v-date-picker v-model="picker" :landscape="landscape" :reactive="reactive"></v-date-picker>
    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
    #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;

    Vuetify Hello World

    • カレンダーの日付をクリックすると数字が消える(用調査)




Back to blog