如何開始Vuetify

>本文演示瞭如何使用Vuetify快速構建有吸引力的交互式前端，即vue.js組件框架遵循Google的材料設計規範。 Vuetify雖然不是UX專業知識的代替，但為創建用戶友好的接口提供了堅實的基礎。

Vuetify提供了其他VUE.JS CSS框架（如Bootstrap-Vue）的引人注目的替代方案，特別是對於那些尋求材料設計美學的人。 材料設計的適應性可以更快地開髮美麗的可用產品。 Vuetify目前是vue.js最全面的UI庫，該庫完全實現了材料設計。 Vuetify的關鍵優勢：

>開源和MIT許可。

直接安裝和集成。
跨瀏覽器的兼容性（較舊瀏覽器的多填充物）。
• >
免費定制的免費主題和高級主題。
• 基於CSS Flexbox的12點網格系統，用於響應式佈局。 精簡開發的
必不
• 強大的社區支持。
• >先決條件：v-toolbarv-navigation-drawer v-app本教程假定為高級vue.js知識。 初學者應首先通過相關資源熟悉vue.js。
• 什麼是vuetify？

Vuetify是由贊助商和社區志願者支持的開源UI圖書館。它的主動不和諧社區和頻繁的更新可確保持續的支持和錯誤修復。 Vuetify優先考慮語義組件和道具名稱，以易於使用和記憶。 它還提供預先建立的主題和佈局以加速發展。

安裝vuetify：

對於現有的VUE項目：

然後，在

>或中：>

在

中包括材料圖標：

> 使用Vue CLI的新項目：

>為最佳構建大小選擇“默認”預設。

<code class="language-bash">npm install vuetify</code>

index.js> vuetify基礎知識：main.js

<code class="language-javascript">import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);</code>

組件是必不可少的，應包裝所有Vuetify組件。

必須是index.html的直接孩子。

用作主要的應用程序工具欄。

<code class="language-html"><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900%7CMaterial+Icons" rel="stylesheet"></code>

>用props的自定義：

<code class="language-bash">vue create vuetify-demo
cd vuetify-demo
vue add vuetify</code>

> Vuetify組件是可以使用道具的高度自定義的。 例如，v-toolbar's app，dark和color> props控制其外觀。 可以通過直接指定顏色名稱（用於背景）或附加--text（用於文本顏色）來實現顏色自定義。 darken->和lighten-修飾符調整顏色強度。

網格系統：

Vuetify採用了12點Flexbox的網格系統，用於各種屏幕尺寸的響應佈局。 在

v-container路由和導航： v-layout Vuetify與VUE路由器無縫集成。 v-flex和

之類的組件創建直觀的導航菜單。 組件上的

支柱可以充當路由鏈接。

構建登錄表格：

> v-navigation-drawer可以使用v-list，to，

和

組件來構建簡單的登錄表單。 摘要：

> Vuetify簡化了視覺上吸引人和響應式Web應用程序的創建。它的材料設計依從性，廣泛的組件庫和易於自定義的性能使其成為vue.js開發人員的寶貴工具。 在提供快速的開發道路的同時，重要的是要記住，強大的UX設計原則仍然至關重要。 （由於長度約束而省略了FAQS部分，但可以使用提供的文本輕鬆重建。）

以上是如何開始Vuetify的詳細內容。更多資訊請關注PHP中文網其他相關文章！