本文節選自霍格沃茲測試學院內部教材

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

瀏覽器支持

瀏覽器名稱支持狀態

Chromium（Chrome, Edge Insider）	支持
Edge	支持
Firefox	支持
Safari 10+	支持
IE11/Safari 9	需要poyfill
IE9/IE10	不支持

組件庫安裝

vue add vuetify

組件庫使用

組件庫地址：Alert 提示框 — Vuetify?1

API 地址：$vuetify API — Vuetify

組件示例-數據表格

<template><v-data-tablev-model="selected":headers="headers":items="desserts":single-select="singleSelect"item-key="name"loading="true"class="elevation-1"><template v-slot:top><v-switchv-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>

屬性列表

屬性名稱說明數據類型默認值

:single-select	將選擇模式更改為單選	boolean	false
:items	要渲染的數據	array
item-key	每行數據綁定的唯一屬性	string	‘id’
:headers	表頭信息	DataTableHeader
loading	是否顯示加載數據的進度條	boolean	false

參考鏈接

Vue 官網：API — Vue.js

Vuetify：$vuetify API — Vuetify

Vuetify 是 Vue 的語義化組件框架，旨在提供整潔、語義化和可重用的組件，使得構建應用程序更方便。Vuetify框架就先說到這里啦，大家可以多多練習一下哦~

喜歡軟件測試的小伙伴們，如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！

更多技術文章

?

總結

以上是生活随笔為你收集整理的技术分享 | 学做测试平台开发-Vuetify 框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。