最好的Vue组件库之Vuetify的入坑指南(持续更新中)

这篇具有很好参考价值的文章主要介绍了最好的Vue组件库之Vuetify的入坑指南(持续更新中)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

     安装Vuetify

     文档结构

        快速入门

        特性

        样式和动画 


        首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能让你们稍微少走一些弯路就是本文的目的。我其实也只是会用了而已,没有研究得多深,写了一个多么多么复杂得项目,所以如果你觉得我说的是依托答辩的话,也请高抬贵嘴,右上角即可,非常感谢!

        本文将会分享自己的对于Vuetify使用的一些见解以及感悟,会有来自官方文档的截图,但是并不意味着是复制粘贴,会有自己的见解的,所以请朋友们放心。

        这里放上官方文档的链接:Vue2的Vuetify文档 ,Vue3的Vuetify文档

        本文会使用Vue2的文档进行讲解(以下用v2文档和v3文档来分别指代Vue2的Vuetify文档和Vue3的vuetify文档),而且v2的文档是有完备的中文文档的,这点十分友好,而且如果能够使用Vue2版本的Vuetify了,Vue3的也不在话下了。

        v3的文档截止至本文的发布日期还未有中文文档,是全英文的,而且v3文档还在持续更新中,既然它还在持续更新中也就意味着有很多v2文档中本该有的组件未被改写成v3版本的,就比如说v2版本有一个骨架屏的组件,目前v3文档中是没有的,之前写过一个项目用了Vue3+Vue3版本的vuetify,那个时候就因为这个头疼不已,遂只能不用这个骨架屏。所以给各位的一个忠告就是:目前想用的话,最好还是用Vue2的Vuetify,毕竟它所有的组件完备,还有中文文档。      

        为什么说它是最好的vue组件库呢?按照官方的说法就是:

vuetify,教程向文章,vue.js,前端,javascript,vuetify

         下面的是各种主流的框架对比:

 vuetify,教程向文章,vue.js,前端,javascript,vuetify

 

         可以看到的是,Vuetify更新周期快,长期对于文档进行支持,其中个人觉得最牛逼的就是Treeshaking(即摇树,或者也可以称为树摇)功能了,可以给各位可能没有听过这个概念的朋友解释一下,Treeshaking的功能就是在项目打包的时候会自动移除哪些你导入了的但却没有被使用到的组件或者其他东西,这样的话对于控制项目打包的大小是很有好处的。

        好了,前言就这么多吧,接下来可以开始正题了。

     安装Vuetify

        你可以使用下面这条命令来创建一个vuetify项目,项目结构会自动帮助你编排好的:

vue create my-app

         若已经有了一个项目想引入vuetify的,就可以像下面这样:

vue add vuetify

     文档结构

        vuetify,教程向文章,vue.js,前端,javascript,vuetify

         文档的结构主要是上图中的这样,先不要去管UI组件,API,指令那些乱七八糟的,我们先把重点放到红框中的3个部分,首先先看一下快速入门:

        快速入门

        vuetify,教程向文章,vue.js,前端,javascript,vuetify

         其实你真正需要看的,也许只有“安装”这一个小节,其他的你大致浏览一下即可,不需要有负担。紧接着就是“特性”这个小节:

        特性

        vuetify,教程向文章,vue.js,前端,javascript,vuetify

         好的,你会发现感觉好多需要看的对吧,别着急,我们一个一个来看:

无障碍 这是一项对于残疾人的包容性实践,让残疾人群体也可以使用,不过一般而言你的项目应该是使用不到这个的,所以基本上可以忽略掉
双向性 即可以让你的网站支持从左至右(LTR)的语言排布方式和从右至左(RTL)的语言排布方式,不过一般而言网站都是从左至右的,所以这部分你基本上也可以忽略掉
响应式显示 这部分是设置你的网站的响应式布局的,能够组件根据屏幕尺寸的大小来自动调节布局,你要做的就只是设置其对应在某个断点处的样式即可。首先会为你提供一张断点表:vuetify,教程向文章,vue.js,前端,javascript,vuetify,上面列举出了一系列默认的尺寸,你可以直接用,至于怎么用,后文会提到。同时也可以自定义想要的断点,具体参考文档。
全局配置

我暂时没有用到全局配置去设置什么东西,不过官网也没给出太多的配置项,只有下图中的内容:

vuetify,教程向文章,vue.js,前端,javascript,vuetify

图标字体 可以在这里设置自己想使用的图标库,具体如何配置请参阅文档。个人的建议是:不推荐使用这些图标库,完全可以让公司设计或者自己找一个图标然后使用,为什么呢?因为使用图标库的弊端就是,会造成打包体积的一定长度上的增大,因为有很多图标你是用不上的,但是你只要用了其中的一个图标,就会将整个图标文件打包,就很坑,自己找的图标就没有这些问题。
国际化多语言 这个相信各位可能都有用过,就是i18n,用来切换各种语言,详情请参阅文档
布局

vuetify提供了一些预设的布局来供你使用,不过一般而言我们是用不上的,因为设计图上一般而言肯定是不会和预设的布局相符的。

布局组件其实说白了就两个,v-app组件和v-main组件,后文会提到的,先不着急。

预设 你可以在这里修改自己想要的白天黑夜主题,还有自定义的颜色,图标库,断点等,不一一列举,详情请参阅文档
SASS变量 就是一些全局的默认样式,你可以覆盖它们,看文档很容易就可以明白。如果你不会sass,推荐先学习一下sass,预估学习时间在半小时左右,链接在这里:sass中文文档
程序滚动 即你可以通过vuetify提供的api以一种编程的方式(即通过vuetify提供的函数来控制滚动)来控制滚动条的滚动
主题 在这里你可以控制不同主题一些样式的呈现方式,比如你可以设置dark模式和light模式的样式
树摇 vuetify会按需导入所需要的组件,并最终让包大小更小,这个功能已经默认开启了,会自动树摇的。

       

        样式和动画 

        先写到这边,下次有时间继续更新。。。

        文章来源地址https://www.toymoban.com/news/detail-818247.html

到了这里,关于最好的Vue组件库之Vuetify的入坑指南(持续更新中)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+uniapp开发小程序踩坑指南(持续更新)

    原因:没有配置小程序AppID  报错一堆文件找不到,并且有define is not defined错误提示 原因:没有配置基础库或者基础库版本过高 rpx(responsive pixel):可以根据屏幕宽度自适应。规定屏幕宽度为750rpx。如果iphon6上,屏幕宽度为375px,共有750个像素,则750rpx = 375培训= 750物理像素,

    2024年02月08日
    浏览(42)
  • Electron学习2 使用Electron-vue和Vuetify UI库

    Electron-Vue 是一个使用 Vue.js 构建跨平台桌面应用程序的框架。它基于 Electron,一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源库。 Electron-Vue 结合了 Vue.js 的灵活性和 Electron 的跨平台能力,使得开发桌面应用程序变得更加简单和高效。以下是一些 Electron-Vue 的主要

    2024年02月11日
    浏览(34)
  • 【C++ 入坑指南】(05)数据类型

    C++ 规定在创建一个变量或常量时,必须要指定出相应的数据类型,否则无法给变量分配内存。 作用 :整型变量表示的是整数类型的数据。 C++ 中能够表示整型的类型有以下几种方式, 区别在于所占内存空间不同 。 注意:不同系统会有所差异,一字节为 8 位。 数据类型 占用

    2024年02月05日
    浏览(32)
  • 【数据仓库】BI看板DataEase入坑指南

            开头夸夸国产开源BI软件DataEase,支持常见各种报表,还支持图表联动和上下级钻取,超赞有木有!!!         再来为什么说入坑,源码启动各种不服啊。本地用的maven3.5一直导入不了Java项目backend。后来看了官网bilibili源码启动视频,搞了1个多小时。注意和

    2024年02月16日
    浏览(51)
  • 【2023.7.29】浅谈手办——新人入坑指南

    出于对动漫的热爱,相信很多人都会买手办,本人在大一时开始入手了第一个手办,超大猿王路飞(高约50cm),当时对手办还不是很了解,只知道存在正版、非正版区分,但是由于最近又开始入坑,对手办的了解慢慢开始细化起来,所以写一篇文章整理一下目前了解到的,以

    2024年02月15日
    浏览(42)
  • Android 图片加载库之Coil详解与使用指南

    了解Coil Android图片加载库的优势、集成方法和使用方式。掌握Coil的特点,如性能优化、轻量级、易用性强,以及高级功能如GIF动态加载、图片变换等。

    2024年02月08日
    浏览(55)
  • Fooocus入坑指南-对SDXL支持最棒的UI工具

    最新发布的SDXL(Stable Diffusion X Language)要解决更精准地控制它生成我们想要的图片。SDXL理解自然语言描述,并可精确控制Stable Diffusion输出特定风格和内容的图像。只需简单的自然语言,你就可以生成理想中的场景、人物、物体等。 相比于原版Stable Diffusion,SDXL增强了对语义和细节

    2024年02月03日
    浏览(38)
  • 关于windows上Python3.12.0安装FastAPI入坑指南

    #工作笔记#  先说下起因: 年前兄弟说有个webapi的需求看怎么解决,抽空想到Python比较容易上手,而且FastAPI性能号称拥有可与NodeJS和Go并肩的极高性能。 FastAPI官网注明使用 Python 3.8+ ,而我本机又有从Py3.6到Py3.12的每个大版本,见下图 接着入坑开始了。。。 #问题描述: 1 )

    2024年02月22日
    浏览(50)
  • 向量数据库入坑指南:初识 Faiss,如何将数据转换为向量(一)

    我们日常使用的各种 APP 中的许多功能,都离不开相似度检索技术。比如一个接一个的新闻和视频推荐、各种常见的对话机器人、保护我们日常账号安全的风控系统、能够用哼唱来找到歌曲的听歌识曲,甚至就连外卖配送的最佳路线选择也都有着它的身影。 相信很多同学是第

    2024年02月05日
    浏览(44)
  • 若依ruoyi-vue前端组件的使用指南

    若依ruoyi-vue提供了丰富的前端组件,可以帮助开发人员快速搭建现代化的Web应用。本文将介绍如何使用Ruoyi Vue的前端组件,包括自定义组件、组件注册和组件通信。 1. 自定义组件 自定义组件允许开发人员根据项目需求创建新的组件,以实现特定的功能或样式。在Ruoyi Vue中,

    2024年04月25日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包