.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號： N191121301
出刊日期： 2019/11/13
在這篇文章之中，將介紹如何在「Vue」專案之中透過「Vuetify」來設計網站的版面，即使你不熟悉UX設計的原則，也能夠輕鬆做出具吸引力的、符合質感設計（Material Design）的互動式網頁介面。
建立Vue CLI專案
讓我們先利用Vue CLI 3.11版建立一個專案，在命令提示視窗輸入使用以下指令，建立一個專案，將專案命為「myvuetify」後按下「Enter」鍵：
vue create myvuetify
這個命令執行結果，請參考下圖所示，接下來會出現對話，詢問是否使用預設的配置（preset），或者要手動進行設定：
圖 1：使用預設的配置（preset）。
選擇使用預設的設定（default (babel, eslint)）按下「Enter」鍵，下一步便開始安裝相依插件（Plugin），這需要花費一些時間等待。
專案建立完成後在命令提示視窗輸入以下指令，使用「cd」切換到「myvuetify」所在資料夾：
cd myvuetify
在命令提示視窗輸入以下指令，加裝「vuetify」插件：
vue add vuetify
接下來會出現對話，詢問是否使用預設的配置（preset），選擇使用預設的設定（default），接下來按下「Enter」鍵，請參考下圖所示：
圖 2：在專案加裝「Vuerify」插件。
完成之後將顯示以下訊息，安裝的過程中會修改專案中的多個檔案，請參考下圖所示：
圖 3：加裝「Vuerify」插件會修改專案結構與檔案程式碼。
檢視「index.html」檔案，使用<link>標籤，引用了相關的圖示與樣式：
「index.html」檔案程式列表
而「main.js」檔案之中則加入了「import」語法，匯入與使用「vuetify」，請參可考以下範例程式碼：
「main.js」檔案程式列表
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
檢視「App.vue」檔案，加入許多「v-」開頭的標籤，這些都是Vuetify提供的，參考以下範例程式碼：
「App.vue」檔案程式列表
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span> Vuetify </span>
<span class="font-weight-light"> MATERIAL DESIGN </span>
</v-toolbar-title>
<v-spacer> </v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2"> Latest Release </span>
</v-btn>
</v-app-bar>
<v-content>
<HelloWorld />
</v-content>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>
「<v-app>」組件是必要不可省略的項目，它用來定義應用程式，它決定了版面配置（layout）系統的Grid臨界點，所有Vuetify組件都需要放在這個組件的標籤之中定義，例如「<v-content>」，「<v-app>」組件只能夠在應用程式中出現一次。
「<v-app-bar >」組件主要是用來定義應用程式中的導覽系統，例如，選單。<v-app-bar app>加上「app」PROP，表示此組件是應用程式配置（layout）的一部分，用來動態調整內容的大小。「<v-toolbar-title>
」組件用來定義應用程式的名稱。「<v-content>」表示網頁要顯示的主要內容，也就是HTML 「<body>」標籤中要呈現的內容。
安裝「Vuetify」插件的同時也修改了專案中的「HelloWorld.vue」檔案，加入了版面配置相關的「v-layout」、「v-flex」等標籤，參考以下範例程式碼：
「HelloWorld.vue」檔案程式列表
<template>
<v-container>
<v-layout
text-center
wrap
>
<v-flex xs12>
<v-img
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
></v-img>
</v-flex>
<v-flex mb-4>
<h1 class="display-2 font-weight-bold mb-3">
Welcome to Vuetify
</h1>
<p class="subheading font-weight-regular">
For help and collaboration with other Vuetify developers,
<br>please join our online
<a href="https://community.vuetifyjs.com" target="_blank"> Discord Community </a>
</p>
</v-flex>
<v-flex
mb-5
xs12
>
<h2 class="headline font-weight-bold mb-3"> What's next? </h2>
<v-layout justify-center>
<a
v-for="(next, i) in whatsNext"
:key="i"
:href="next.href"
class="subheading mx-3"
target="_blank"
>
{{ next.text }}
</a>
</v-layout>
</v-flex>
<v-flex
xs12
mb-5
>
<h2 class="headline font-weight-bold mb-3"> Important Links </h2>
<v-layout justify-center>
<a
v-for="(link, i) in importantLinks"
:key="i"
:href="link.href"
class="subheading mx-3"
target="_blank"
>
{{ link.text }}
</a>
</v-layout>
</v-flex>
<v-flex
xs12
mb-5
>
<h2 class="headline font-weight-bold mb-3"> Ecosystem </h2>
<v-layout justify-center>
<a
v-for="(eco, i) in ecosystem"
:key="i"
:href="eco.href"
class="subheading mx-3"
target="_blank"
>
{{ eco.text }}
</a>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data: () => ({
ecosystem: [
{
text: 'vuetify-loader',
href: 'https://github.com/vuetifyjs/vuetify-loader',
},
{
text: 'github',
href: 'https://github.com/vuetifyjs/vuetify',
},
{
text: 'awesome-vuetify',
href: 'https://github.com/vuetifyjs/awesome-vuetify',
},
],
importantLinks: [
{
text: 'Documentation',
href: 'https://vuetifyjs.com',
},
{
text: 'Chat',
href: 'https://community.vuetifyjs.com',
},
{
text: 'Made with Vuetify',
href: 'https://madewithvuejs.com/vuetify',
},
{
text: 'Twitter',
href: 'https://twitter.com/vuetifyjs',
},
{
text: 'Articles',
href: 'https://medium.com/vuetify',
},
],
whatsNext: [
{
text: 'Explore components',
href: 'https://vuetifyjs.com/components/api-explorer',
},
{
text: 'Select a layout',
href: 'https://vuetifyjs.com/layout/pre-defined',
},
{
text: 'Frequently Asked Questions',
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
},
],
}),
};
</script>
「Vuetify」受到Bootstrap Grid的啟發，在版面配置方面運用了雷同的container、row、column概念，且將預設將畫面的寬度視為「12」欄，並使用flexbox標準來設計版面。「<v-layout>」用來分組，並設定群組對齊方向。「v-flex」可以將之想像成一個資料橫列（row）
在命令提示視窗輸入以下指令，啟動開發階段的網站伺服器，並執行該網站首頁：
npm run serve
開發階段的網站伺服器會動態賦予網站一個埠號，以本例來說，接聽在「8080」埠，開啟瀏覽器，根據上個步驟，輸入以下網址與埠號「http://localhost:8080/」就可以看到範本網站，目前應用程式首頁的內容看起來如下圖所示：
圖 4：Vuetify範本首頁。
佈景主題
「Vutify」提供兩種「light」、「dark」兩種佈景主題，預設套用「light」佈景主題，若修改「App.vue」在「v-app-bar」套用「dark」prop，將背景顏色設定為黑色，將字的顏色設定為白色：
<v-app-bar app dark>
則網站畫面看起來如下圖所示：
圖 5：套用佈景主題。
若設定「color」prop為「blue」，便可指定要使用的背景顏色：
<v-app-bar app dark color='blue'>
網站畫面看起來如下圖所示：
圖 6：指定要使用的背景顏色。
若要修改文字的顏色為黃色，可以在「color」設定「yellow--text」：
<v-app-bar app dark color='blue yellow--text'>
網站畫面看起來如下圖所示：
圖 7：自訂文字的顏色。
若要客製化CSS樣式，自訂佈景主題，可以利用官方的「https://theme-generator.vuetifyjs.com/」網頁。
選單導覽系統
接下來我們來談談「Vuetify」選單導覽系統的使用，專案需要先使用「vue-router」插件（plugin）來加入路由。在命令提示字元視窗中，切換目前工作路徑到專案資料夾，輸入以下指令，安裝「vue-router」插件（Plugins）
npm install vue-router
接著修改「main.js」檔案，使用「import」關鍵字匯入「vue-router」插件，並在使用「new」關鍵字建立「Vue」實例時，直接注入「vue-router」插件：
「main.js」 檔案程式列表
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router'
Vue.config.productionTip = false
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount('#app')
在「src」資料夾之中加入一個「router.js」檔案，在檔案之中加入以下程式碼，建立並匯出「Router」物件，在「routes」屬性使用陣列來定義兩個路由，「/」路徑會顯示「Home.vue」頁面；「/About」路徑將顯示「About.vue」頁面，而「name」是選擇性的：
「router.js」檔案程式列表
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/About',
name: 'about',
component: About
}
]
})
使用以下程式碼取代掉原來「App.vue」檔案中的程式碼，利用「Vuetify」插件來定義選單，這段選單的標籤是直接複製官網的toolbars範例過來修改的，參考網址：「https://vuetifyjs.com/en/components/toolbars#toolbars」。
「App.vue」 檔案程式列表
<template>
<v-app>
<div>
<v-toolbar
dark
prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-app-bar-nav-icon> </v-app-bar-nav-icon>
<v-toolbar-title> My Web Site </v-toolbar-title>
<div class="flex-grow-1"> </div>
<v-toolbar-items>
<v-btn text to="/" > Home </v-btn>
<v-btn text to="/about"> About </v-btn>
</v-toolbar-items>
</v-toolbar>
</div>
<v-content>
<router-view />
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
<router-view/> 標籤所在的位置是一個定位點，代表未來透過路由執行的「Home.vue」、「About.vue」組件標籤所要插入的位置。
接著在「components」資料夾中加入「Home.vue」檔案， 並在檔案中加入以下內容，隨意在標題下方加入一些亂數假文：
「components\Home.vue」 檔案程式列表
<template>
<v-container>
<v-layout>
<v-flex xs12>
<h1> Home </h1>
<p>
ipsum dolor sit amet consectetur adipisicing elit. Asperiores consectetur quo consequuntur beatae sapiente illum atque quia aut nulla explicabo.
</p>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default { };
</script>
<style scoped>
</style>
接著在「components」資料夾中加入「About.vue」檔案， 並在檔案中加入以下內容，隨意在標題下方加入一些亂數假文：
「components\About.vue」 檔案程式列表
<template>
<v-container>
<v-layout>
<v-flex xs12>
<h1> About </h1>
<p>
ipsum dolor sit amet consectetur adipisicing elit. Asperiores consectetur quo consequuntur beatae sapiente illum atque quia aut nulla explicabo.
</p>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
執行網站，目前的畫面看起來如下圖所示，網頁上方顯示「Home」、「About」兩個連結：
圖 8：自訂選單導覽系統。
點選「About」連結將切換到「About（關於）」頁面，請參考下圖所示：
圖 9：使用路由系統切換到About畫面。
設計圖片輪播功能
Vuetify設計相當豐富的UI介面，接下來讓我們在首頁加入圖片輪播功能，修改「Home.vue」檔案，加入「<v-carousel>」，這段標籤是複製於官網範例：「https://vuetifyjs.com/en/components/carousels」。
「Home.vue」檔案程式列表
<template>
<v-container>
<v-layout>
<v-flex xs12>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
> </v-carousel-item>
</v-carousel>
<h1> Home </h1>
<p>
ipsum dolor sit amet consectetur adipisicing elit. Asperiores consectetur quo consequuntur beatae sapiente illum atque quia aut nulla explicabo.
</p>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
}
}
};
</script>
<style scoped>
</style>
執行網站，目前的畫面看起來如下圖所示，透過「Vuetify」很容易就可以製作出專業的網頁介面。
圖 10：設計圖片輪播功能。
結論
現在你應該已經對「Vuetify」有了基本的概念了，「Vuetify」提供了CSS與Grid版面配置系統，只需要了解如何從官網複製這些標籤與樣式到Vue組件模板之中，再進行修改就好，省掉自行處理CSS的問題。
訂閱