Vuetify

by vivid 13. 十一月 2019 02:47

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N191121301
出刊日期: 2019/11/13

在這篇文章之中,將介紹如何在「Vue」專案之中透過「Vuetify」來設計網站的版面,即使你不熟悉UX設計的原則,也能夠輕鬆做出具吸引力的、符合質感設計(Material Design)的互動式網頁介面。

 

建立Vue CLI專案

讓我們先利用Vue CLI 3.11版建立一個專案,在命令提示視窗輸入使用以下指令,建立一個專案,將專案命為「myvuetify」後按下「Enter」鍵:

vue create myvuetify

這個命令執行結果,請參考下圖所示,接下來會出現對話,詢問是否使用預設的配置(preset),或者要手動進行設定:

clip_image002

圖 1:使用預設的配置(preset)。

選擇使用預設的設定(default (babel, eslint))按下「Enter」鍵,下一步便開始安裝相依插件(Plugin),這需要花費一些時間等待。

專案建立完成後在命令提示視窗輸入以下指令,使用「cd」切換到「myvuetify」所在資料夾:

cd myvuetify

在命令提示視窗輸入以下指令,加裝「vuetify」插件:

vue add vuetify

接下來會出現對話,詢問是否使用預設的配置(preset),選擇使用預設的設定(default),接下來按下「Enter」鍵,請參考下圖所示:

clip_image004

圖 2:在專案加裝「Vuerify」插件。

完成之後將顯示以下訊息,安裝的過程中會修改專案中的多個檔案,請參考下圖所示:

clip_image006

圖 3:加裝「Vuerify」插件會修改專案結構與檔案程式碼。

檢視「index.html」檔案,使用<link>標籤,引用了相關的圖示與樣式:

「index.html」檔案程式列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title> myvuetify </title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong> We're sorry but myvuetify doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
    </noscript>
    <div id="app"> </div>
    <!-- built files will be auto injected -->
  </body>
</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/」就可以看到範本網站,目前應用程式首頁的內容看起來如下圖所示:

clip_image008

圖 4:Vuetify範本首頁。

佈景主題

「Vutify」提供兩種「light」、「dark」兩種佈景主題,預設套用「light」佈景主題,若修改「App.vue」在「v-app-bar」套用「dark」prop,將背景顏色設定為黑色,將字的顏色設定為白色:

<v-app-bar app dark>

則網站畫面看起來如下圖所示:

clip_image010

圖 5:套用佈景主題。

若設定「color」prop為「blue」,便可指定要使用的背景顏色:

<v-app-bar app dark color='blue'>

網站畫面看起來如下圖所示:

clip_image012

圖 6:指定要使用的背景顏色。

若要修改文字的顏色為黃色,可以在「color」設定「yellow--text」:

<v-app-bar app dark color='blue yellow--text'>

網站畫面看起來如下圖所示:

clip_image014

圖 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」兩個連結:

clip_image016

圖 8:自訂選單導覽系統。

點選「About」連結將切換到「About(關於)」頁面,請參考下圖所示:

clip_image018

圖 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」很容易就可以製作出專業的網頁介面。

clip_image020

圖 10:設計圖片輪播功能。

結論

現在你應該已經對「Vuetify」有了基本的概念了,「Vuetify」提供了CSS與Grid版面配置系統,只需要了解如何從官網複製這些標籤與樣式到Vue組件模板之中,再進行修改就好,省掉自行處理CSS的問題。

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript | VueJS | 許薰尹Vivid Hsu

評論 (1) -

Easton
Easton United States
2019/12/1 下午 02:30:26 #

This information is very valuable i will be sharing this with some of my friends

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List