Technology sharing | learning to do test platform development vuetify framework

This article is excerpted from the internal textbook of Hogwarts testing college

Vuetify yes Vue Semantic component framework , Designed to provide cleanliness 、 Semantic and reusable components , Make it easier to build applications .

Vuetify The core is to provide a variety of reusable , Plug and play components suitable for various project specifications .

• Vue Semantic components of . utilize Vue Functional components of , All tag based classes used to aid the main assembly , For example, a card subject , have access to v-card-title To deal with it
• Easy forming .Vuetify It is envisaged to create... From the bottom . Every component , Instructions and functions all work seamlessly , Allows you to focus on creating your application .
• Born for mobile devices . be-all Vuetify Components are designed for mobile devices . Applications can easily switch between different directions and screen sizes , compatible web、 The tablet 、 mobile phone .
• Pre made Vue CLI Templates .Vuetify Bring their own 3 individual Vue Templates , Ready to use .

By means of Vue and Material Design The power of , And a large number of carefully crafted component libraries and features , We can use Vuetify Build excellent applications .Vuetify comply with Google Of Material Design standard , Each component is carefully designed , With modularity 、 Responsive and excellent performance , Its components have easy to remember semantic design , You can convert memorized complex classes and markup symbols into simple and explicit names .

image1080×612 78.1 KB

Browser support

Component library installation

vue add vuetify

Component library use

Component library address ：Alert Prompt box — Vuetify 1

API Address ：https://vuetifyjs.com/zh-Hans/api/vuetify/

Component example - Data table

<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",   //  Column name           value: "id",  //  Data name of column binding （ Interface returns the name of the data field ）          align: 'center', //  Location , Optional 'left' | 'center' |'right'          sortable: true, //  Can it be sorted           width: string //  Width         },        {          text: " Use case name ",          value: "caseName",          align: 'center',          sortable: false        },        {          text: " Use case data ",          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>

Property list

Reference link

Vue Official website ：API — Vue.js

Vuetify：https://vuetifyjs.com/zh-Hans/api/vuetify/

Vuetify yes Vue Semantic component framework , Designed to provide cleanliness 、 Semantic and reusable components , Make it easier to build applications .Vuetify That's all for the framework , You can practice more ~

More technical articles ： https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun&timestamp=1651197110