vuetify使用详细入门步骤和日历的教程,方便下次使用，记录下来。

公司最近项目使用vuetify第三方UI库，看了文档一个很好用的UI库pc端和移动端都很好用，可以兼顾两个端口。

图片如下:

解决bug:
初始创建项目cmd运行创建，首先vue/cli脚手架必须是全局的，或者项目中先创建一个脚手架，在vue create 项目名字。

入门步骤:
1.node-V
2.npm -V
3.vue -V
初始运行检查

cmd/运行下载项目
全局下载vue

建立vue项目
vue create vuetify-s

步骤2:

cd vuetify-s
npm run serve

步骤3:

vue add vuetify

步骤4:

npm run serve

可以成功运行项目了.

总结:以上是初始构建过程,添加功能就自己书写逻辑即可。

初始的构建一个组件/在app.vue(引入组件，注册组件，使用组件)
views.vue

<template>
  <div class="views-div">
    <!-- 我是表单页面 -->
    我是views页面
    </div>
</template>

<script>
export default {
  name:'views'
}
</script>

<style>

</style>

app.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        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/>
      //使用组件
      <views></views>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';
//引入组件
import Views from './view/views.vue'
export default {
  name: 'App',

  components: {//注册组件
    HelloWorld,
    Views
  },

  data: () => ({
    //
  }),
};
</script>

模板日历:

代码如下:适用pc端，移动端需要修改断点
views.vue

<template>
  <v-container class="grey lighten-5">
    <v-row no-gutters class="mb-6">
      <v-col
        v-for="n in 3"
        :key="n"
        cols="12"
        sm="4"
      >
        <v-card
          class="pa-2"
          outlined
          tile
        >
          One of three columns
        </v-card>
      </v-col>
    </v-row>
    <!-- 试验calendar -->
     <v-sheet
      tile
      height="54"
      class="d-flex"
    >
      <v-btn
        icon
        class="ma-2"
        @click="$refs.calendar.prev()"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <v-select
        v-model="type"
        :items="types"
        dense
        outlined
        hide-details
        class="ma-2"
        label="type"
      ></v-select>
      <v-select
        v-model="mode"
        :items="modes"
        dense
        outlined
        hide-details
        label="event-overlap-mode"
        class="ma-2"
      ></v-select>
      <v-select
        v-model="weekday"
        :items="weekdays"
        dense
        outlined
        hide-details
        label="weekdays"
        class="ma-2"
      ></v-select>
      <v-spacer></v-spacer>
      <v-btn
        icon
        class="ma-2"
        @click="$refs.calendar.next()"
      >
        <v-icon>mdi-chevron-right</v-icon>
      </v-btn>
    </v-sheet>
     <v-sheet height="600">
      <v-calendar
        ref="calendar"
        v-model="value"
        :weekdays="weekday"
        :type="type"
        :events="events"
        :event-overlap-mode="mode"
        :event-overlap-threshold="30"
        :event-color="getEventColor"
        @change="getEvents"
      ></v-calendar>
     </v-sheet>



  </v-container>
  
</template>

<script>
export default {
  name:'views',
   data: () => ({
      type: 'month',
      types: ['month', 'week', 'day', '4day'],
      mode: 'stack',
      modes: ['stack', 'column'],
      weekday: [0, 1, 2, 3, 4, 5, 6],
      weekdays: [
        { text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
        { text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
        { text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
        { text: 'Mon, Wed, Fri', value: [1, 3, 5] },
      ],
      value: '',
      events: [],
      colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
      names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party'],
    }),
    methods: {
      getEvents ({ start, end }) {
        const events = []

        const min = new Date(`${start.date}T00:00:00`)
        const max = new Date(`${end.date}T23:59:59`)
        const days = (max.getTime() - min.getTime()) / 86400000
        const eventCount = this.rnd(days, days + 20)

        for (let i = 0; i < eventCount; i++) {
          const allDay = this.rnd(0, 3) === 0
          const firstTimestamp = this.rnd(min.getTime(), max.getTime())
          const first = new Date(firstTimestamp - (firstTimestamp % 900000))
          const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
          const second = new Date(first.getTime() + secondTimestamp)

          events.push({
            name: this.names[this.rnd(0, this.names.length - 1)],
            start: first,
            end: second,
            color: this.colors[this.rnd(0, this.colors.length - 1)],
            timed: !allDay,
          })
        }

        this.events = events
      },
      getEventColor (event) {
        return event.color
      },
      rnd (a, b) {
        return Math.floor((b - a + 1) * Math.random()) + a
      },
    },


   
}
</script>

<style scoped="scoped">
</style>

官网地址：https://vuetifyjs.com/en/components/calendars/#usage