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-barappcolor="primary"dark><div class="d-flex align-center"><v-imgalt="Vuetify Logo"class="shrink mr-2"containsrc="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"transition="scale-transition"width="40"/><v-imgalt="Vuetify Name"class="shrink mt-1 hidden-sm-and-down"containmin-width="100"src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"width="100"/></div><v-spacer></v-spacer><v-btnhref="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-colv-for="n in 3":key="n"cols="12"sm="4"><v-cardclass="pa-2"outlinedtile>One of three columns</v-card></v-col></v-row><!-- 试验calendar --><v-sheettileheight="54"class="d-flex"><v-btniconclass="ma-2"@click="$refs.calendar.prev()"><v-icon>mdi-chevron-left</v-icon></v-btn><v-selectv-model="type":items="types"denseoutlinedhide-detailsclass="ma-2"label="type"></v-select><v-selectv-model="mode":items="modes"denseoutlinedhide-detailslabel="event-overlap-mode"class="ma-2"></v-select><v-selectv-model="weekday":items="weekdays"denseoutlinedhide-detailslabel="weekdays"class="ma-2"></v-select><v-spacer></v-spacer><v-btniconclass="ma-2"@click="$refs.calendar.next()"><v-icon>mdi-chevron-right</v-icon></v-btn></v-sheet><v-sheet height="600"><v-calendarref="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()) / 86400000const eventCount = this.rnd(days, days + 20)for (let i = 0; i < eventCount; i++) {const allDay = this.rnd(0, 3) === 0const firstTimestamp = this.rnd(min.getTime(), max.getTime())const first = new Date(firstTimestamp - (firstTimestamp % 900000))const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000const 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

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

2023年全网最详细入门网络安全（黑客）教程，收藏这个就够了
前言:如果是在校学生,有很多时间,建议从基础开始学起.如果是马上要找工作了,或者转行,可以直接找一个方向进行学习,比如Web安全,直接学Web安全的内容. 网络安全前景: "高精尖&qu ...
arcgis 地图_ArcGIS超详细入门操作：ArcGIS矢量化地图详细步骤
今天给大家带来的干货是[ArcGIS超详细入门操作:ArcGIS矢量化地图详细步骤],欢迎大家收藏查阅! 在桌面上新建一个文件夹,打开ArcCatalog, "文件"--" ...
YOLO 超详细入门02 v2 （含代码及原文）
文章目录前言背景总结一.YOLOv2改进之框架 1.1 网络架构 1.2 Batch Normalization 二.YOLOv2改进方法之尺寸相关 2.1 High Resolution C ...
WordPress网站程序如何搭建教程详细流程步骤
WordPress 作为动态博客的代表,至今已经有十几年历史,而且一直在更新发展中,功能强大,插件和主题丰富,WordPress搭建使用也很方便.作为个人站长和博主,很多都是从 WordPress 入 ...
板绘干货基础教程古风人物头像详细的步骤过程！
板绘绘画学习今天,这次给大家收集整理的是板绘干货基础教程古风头像详细的步骤过程噢!那些零基础又想学习板绘的小伙伴们一定要看哦! 现在,我们将过程进行了整理,送给大家,希望能够帮助同样对于古风感兴趣的 ...
APNs详细使用步骤
1. 什么是推送通知消息通知分本地通知和远程推送通知,是没有运行在前台的应用程序可以让它们的用户获得相关消息通知的方式.消息通知可能是一条消息,即将发生的日历事件,或远程服务器的新数据.当被操作系统 ...
YOLO 超详细入门（含开源代码）——网络结构、细节、目标损失函数、优点
文章目录前言背景一.YOLO的核心原理预览二.网络结构为什么每个网格有固定的B个Bounding Boes?(即B=2) 三.网络细节 3.1 网络单元(grid) 3.1.1 作用 3.1 ...
k8s v1.9.6 超详细搭建步骤
部署说明 k8s新的版本与之前1.5的部署方式发生改变,官方将kubernetes大组件中的服务例如(kube-proxy.kube-api等服务)剥离出来封装成容器的形式来简化部署的方式.以下为三个 ...
python网络爬虫的基本步骤-黑客基础编写Python爬虫入门步骤
原标题:黑客基础编写Python爬虫入门步骤信息时代,数据就是宝藏.数据的背后隐含着无穷的宝藏,这些宝藏也许就是信息量所带来的商业价值,而大数据本身也将成为桌面上的筹码. 黑客花无涯带你走进黑客 ...

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

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

最新文章

热门文章