技术分享 | 学做测试平台开发-Vuetify 框架_vue3 vuetify做什么的

本文节选自霍格沃兹测试学院内部教材

Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。

Vuetify 核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。

• Vue 的语义成分。利用 Vue 的功能组件，所有基于标记的用于援助主部件的类，比如一个 card 题目，可以使用 v-card-title 来处理
• 成型容易。Vuetify 被设想为从底层创建。每一个组件，指令和功能所有的工作都无缝结合，让你能够专注创建你的应用。
• 为移动设备而生。所有的 Vuetify 组件都是专为移动设备设计。应用程序可以轻松在不同的方向和屏幕尺寸间转换，兼容 web、平板电脑、手机。
• 预先制作的 Vue CLI 模板。Vuetify 自带 3 个 Vue 模板，随时可使用。

通过借助 Vue 和 Material Design 的强大功能，以及大量精心制作的组件库和特性，我们可以使用 Vuetify 构建优秀的应用。Vuetify 遵守 Google 的 Material Design 规范，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能，其组件具有易记忆的语义设计，可将记忆复杂的类和标记符号转换为简单且明确的名称。

image1080×612 78.1 KB

浏览器支持

组件库安装

vue add vuetify

组件库使用

组件库地址：Alert 提示框 — Vuetify 1

API 地址：$vuetify API — Vuetify

组件示例-数据表格

<template>
 
  <v-data-table
 
    v-model="selected"
 
    :headers="headers"
 
    :items="desserts"
 
    :single-select="singleSelect"
 
    item-key="name"
 
    loading="true"
 
    class="elevation-1"
 
  >
 
    <template v-slot:top>
 
      <v-switch
 
        v-model="singleSelect"
 
        label="Single select"
 
        class="pa-3"
 
      ></v-switch>
 
    </template>
 
  </v-data-table>
 
</template>
 
<script>
 
export default {
 
  data() {
 
    return {
 
      singleSelect: false,
 
      selected: [],
 
      headers: [
 
        {
 
          text: "id",   // 列名称
 
          value: "id",  // 列绑定的数据名称（接口返回数据字段名称）
 
          align: 'center', // 位置，可选'left' | 'center' |'right'
 
          sortable: true, // 是否可排序
 
          width: string // 宽度
 
        },
 
        {
 
          text: "用例名称",
 
          value: "caseName",
 
          align: 'center',
 
          sortable: false
 
        },
 
        {
 
          text: "用例数据",
 
          value: "caseData",
 
          align: 'center',
 
          sortable: false
 
        }
 
      ],
 
      desserts: [],
 
    }
 
  },
 
  created() {
 
    this.getList()
 
  },
 
  methods: {
 
    getList() {
 
      let post_data = {
 
        pageNum: 1,
 
        pageSize: 10
      }
 
      this.$api.cases.GetList(post_data).then(res => {
 
        this.desserts = res.data.data.data
 
      })
 
    }
 
  }
 
}
 
</script>

属性列表

参考链接

Vue 官网：API — Vue.js

Vuetify：$vuetify API — Vuetify

Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuetify框架就先说到这里啦，大家可以多多练习一下哦~

喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！

更多技术文章