Vue3 – Vuetify 框架安裝

Vuetify 是一個基於 Vue.js 的 Material Design 風格的 UI 元件庫。它提供了豐富的預先建置元件和工具，幫助開發者快速建立美觀且功能強大的 Web 應用。 Vuetify 的設計理念是遵循 Google 的 Material Design 規範，同時保持靈活性和可自訂性。

Vuetify 特點介紹

豐富的元件庫：

• Vuetify 提供了超過 80 個高品質的 UI 元件，涵蓋了從基礎的按鈕、表單到複雜的佈局和導航等各個方面。
• 這些元件都遵循 Material Design 規範，具有一致的設計風格和使用者體驗。

響應式設計：

• 這些元件都遵循 Material Design 規範，具有一致的設計風格和使用者體驗。
• 透過使用 v-container、v-row、v-col 等佈局元件，開發者可以快速建立靈活的頁面佈局。

主題客製化：

• Vuetify 讓開發者自訂主題顏色、字體、間距等，以滿足不同專案的需求。
• 透過 vuetify.js 設定文件，可以輕鬆修改主題樣式。

國際化支持：

• Vuetify 提供了國際支持，讓開發者可以根據使用者的地理位置和語言偏好顯示不同的內容。

強大的工具和外掛：

• Vuetify 提供了許多實用的工具和插件，如日期選擇器、圖表、資料表格等，幫助開發者快速實現複雜功能。

Vue3 安裝與引用

安裝 Vuetify

npm install vuetify

在 Vue3 Project 中引用 Vuetify 套件

• 在原本的 main.js 中引用以下的程式代碼

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
  })
app.use(vuetify)

• 整體 code如下

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetifyPractice from './views/test/vuetifyPractice.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,
  })

const app = createApp(vuetifyPractice)
app.use(router)
app.use(vuetify)
app.mount('#app')

測試

建立測試 vue 檔案

• 建立一個 vuetifyPractice.vue 檔案

<template>
    <v-container class="bg-surface-variant">
      <v-row no-gutters>
        <v-col
          v-for="n in 3"
          :key="n"
          cols="12"
          sm="4"
        >
          <v-sheet class="ma-2 pa-2">
            One of three columns
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </template>
<script setup>
</script>

• 引用在 main.js 中

import vuetifyPractice from './views/test/vuetifyPractice.vue'
...
...
...
const app = createApp(vuetifyPractice)

參考: url, url2