Vuetify3

Vuetify

安装

npm i vuetify

main.js:

import { createApp } from 'vue'
import App from './App.vue'
 
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
 
const vuetify = createVuetify({
  components,
  directives,
})
 
createApp(App).use(vuetify).mount('#app')

Grid

标准模板，如果单用可能会错位：

<v-container>
	<v-row>
		<v-col cols="6"></v-col>
		<v-col cols="6"></v-col>
	<v-row>
	<v-row>
		<v-col></v-col>
	</v-row>
</v-container>

Flex

• d-flex
• justify-end, justify-start, justify-center, justify-space-between, justify-space-around, justify-space-evenly
• align-start, align-center, align-end（垂直）

使用字体、图标（任选其一即可）

图标字体 — Vuetify

MDI icons（用的这个）

Material Design Icons - Icon Library - Pictogrammers npm install @mdi/font -D 全局：

//App.vue
<script setup>
import vuetify from '@/plugins/vuetify';
</script>
 
<template>
  <main>
    <div id="app">
      <router-view />
    </div>
  </main>
</template>
 
<style scoped>
</style>

局部：

// ComponentFile.vue
<script setup>
import '@mdi/font/css/materialdesignicons.css'
</script>

使用：<v-icon icon="mdi-icon_name"></v-icon>

Fontawsome

npm install @fortawesome/fontawesome-free -D

常见问题

input过高

• 默认会给details（error、hint）留位置，用hide-details="auto"隐藏