软件测试/测试开发丨Vuetify框架的使用

介绍

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

为什么要使用Vuetify框架

  • 所有组件遵从 Material Design 设计规范,UI 体验非常优秀,能够媲美苹果但又完全不同的设计
  • 采用移动优先的设计,无论在手机、平板或 PC 电脑上都有完美的适配
  • 极其丰富的上手文档,活跃的社区,全职团队维护,长期支持
  • 在 Github 上有高达 36.2k 的Star,并且得到了Vue.js 作者尤雨溪大神的推荐
  • 作为一个开源项目,大牌赞助商的坚挺

官方文档:vuetifyjs.com/zh-Hans/int…

Vuetify 页面布局

页面布局是对页面文字,图形或表格进行格式设置

基本布局

  • v-app:应用程序的根节点

    • 替换了之前html的入口
  • v-main:正文内容区域

软件测试/测试开发丨Vuetify框架的使用_第1张图片

布局示例:

软件测试/测试开发丨Vuetify框架的使用_第2张图片

代码示例:


Vuetify 组件的使用

按钮


        正常操作
         关键操作 
         错误操作 
         不可操作 

效果展示:

软件测试/测试开发丨Vuetify框架的使用_第3张图片

数据表格

软件测试/测试开发丨Vuetify框架的使用_第4张图片




抽屉导航

软件测试/测试开发丨Vuetify框架的使用_第5张图片




最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

你可能感兴趣的:(软件测试,功能测试,软件测试,自动化测试,程序人生,职场和发展)