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

評論 (57) -

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

回覆

Royal CBD gummies
Royal CBD gummies United States
2020/2/19 上午 04:56:49 #

Really appreciate you sharing this post.Really thank you! Cool.

回覆

Reishi Nebenwirkungen
Reishi Nebenwirkungen United States
2020/2/26 上午 09:20:01 #

Thanks-a-mundo for the article.Much thanks again. Really Cool.

回覆

CBD oil near me
CBD oil near me United States
2020/2/27 上午 05:07:11 #

I cannot thank you enough for the post.Really thank you! Really Great.

回覆

kids bouncy castle hire
kids bouncy castle hire United States
2020/2/27 下午 07:49:36 #

Thanks for sharing, this is a fantastic blog post.Thanks Again. Great.

回覆

Driver in Ranchi
Driver in Ranchi United States
2020/2/29 下午 07:24:01 #

I truly appreciate this blog.Thanks Again. Really Cool.

回覆

Inquistr
Inquistr United States
2020/2/29 下午 07:59:07 #

This is one awesome blog article.Really thank you! Fantastic.

回覆

coca cola company
coca cola company United States
2020/3/3 上午 08:39:06 #

I appreciate you sharing this article.Really thank you! Much obliged.

回覆

how to use a penis ring
how to use a penis ring United States
2020/3/3 下午 06:18:53 #

Thanks for sharing, this is a fantastic post.Really looking forward to read more. Will read on...

回覆

bingo bash freebies
bingo bash freebies United States
2020/3/4 上午 09:35:10 #

Looking forward to reading more. Great blog.Much thanks again. Great.

回覆

Seitensprung Portal
Seitensprung Portal United States
2020/3/13 上午 11:40:24 #

Thanks a lot for the article post.Much thanks again. Want more.

回覆

buy gmail passwords
buy gmail passwords United States
2020/3/21 下午 03:20:49 #

Great, thanks for sharing this blog article. Great.

回覆

Thanks so much for the post.Thanks Again. Will read on...

回覆

I appreciate you sharing this blog article.Thanks Again. Awesome.

回覆

I truly appreciate this blog article.Much thanks again. Really Cool.

回覆

how many grams in an eighth
how many grams in an eighth United States
2020/3/23 上午 11:40:13 #

Hey, thanks for the blog post.Thanks Again. Keep writing.

回覆

918kiss apk
918kiss apk United States
2020/3/23 下午 12:24:16 #

Thank you for your blog post. Will read on...

回覆

gclub
gclub United States
2020/3/23 下午 06:00:49 #

Wow, great post.Really thank you! Really Cool.

回覆

Commercial Insurance Richmond
Commercial Insurance Richmond United States
2020/3/23 下午 09:07:02 #

This is one awesome blog post.Really thank you! Really Cool.

回覆

check it out
check it out United States
2020/3/26 上午 03:19:04 #

Thanks for sharing, this is a fantastic blog article.Really looking forward to read more. Really Great.

回覆

art gallery New York
art gallery New York United States
2020/3/29 上午 12:26:49 #

wow, awesome blog post.Thanks Again. Awesome.

回覆

Google Adwords Management
Google Adwords Management United States
2020/3/29 下午 08:47:34 #

I value the blog article.Thanks Again. Much obliged.

回覆

918kiss original
918kiss original United States
2020/3/30 上午 12:52:51 #

I am so grateful for your article.Really looking forward to read more. Really Cool.

回覆

Steroids for sale
Steroids for sale United States
2020/3/30 上午 01:59:32 #

Appreciate you sharing, great article post.Much thanks again. Great.

回覆

п&#187;їCARSHOPPER.COM
п»їCARSHOPPER.COM United States
2020/3/30 上午 08:14:48 #

I really liked your article. Will read on...

回覆

carpet cleaning los angeles ca
carpet cleaning los angeles ca United States
2020/3/30 下午 04:20:34 #

I truly appreciate this article post.Really looking forward to read more. Cool.

回覆

resurge side effects
resurge side effects United States
2020/3/30 下午 04:44:15 #

Very neat article.Thanks Again. Will read on...

回覆

Dich thuat tieng Nga
Dich thuat tieng Nga United States
2020/3/30 下午 07:31:54 #

Major thanks for the blog.Really thank you! Keep writing.

回覆

Dhea comprar
Dhea comprar United States
2020/3/30 下午 07:58:31 #

I think this is a real great post.Really thank you! Will read on...

回覆

penis toys
penis toys United States
2020/3/30 下午 11:13:55 #

Really enjoyed this blog post.Really thank you! Awesome.

回覆

anal sex toy
anal sex toy United States
2020/3/31 下午 08:53:21 #

Say, you got a nice blog post. Cool.

回覆

myinforms
myinforms United States
2020/3/31 下午 10:45:52 #

Your mode of describing all in this article is truly good, all can simply be aware of it, Thanks a lot.|

回覆

hotmail sign in
hotmail sign in United States
2020/4/1 上午 05:50:04 #

Really appreciate you sharing this blog article.Really looking forward to read more. Keep writing.

回覆

tim khach hang mua xe tai
tim khach hang mua xe tai United States
2020/4/1 上午 07:55:52 #

Thank you ever so for you article.Really thank you! Cool.

回覆

resurge diet
resurge diet United States
2020/4/1 下午 12:03:27 #

I am so grateful for your blog article. Great.

回覆

CBD Oil UK
CBD Oil UK United States
2020/4/1 下午 12:23:59 #

Hi, after reading this amazing piece of writing i am as well delighted to share my experience here with colleagues.|

回覆

A big thank you for your article. Great.

回覆

Very informative blog. Much obliged.

回覆

A big thank you for your blog article.Much thanks again. Really Cool.

回覆

digital dagar
digital dagar United States
2020/4/2 下午 03:09:17 #

I appreciate you sharing this blog article. Fantastic.

回覆

click here
click here United States
2020/4/2 下午 08:39:22 #

Good day! Do you know if they make any plugins to help with SEO? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good success. If you know of any please share. Many thanks!|

回覆

visit website
visit website United States
2020/4/2 下午 11:36:46 #

I'm really enjoying the design and layout of your website. It's a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme? Exceptional work!|

回覆

Mp3
Mp3 United States
2020/4/3 上午 02:15:48 #

Appreciate you sharing, great article post.Really thank you! Awesome.

回覆

Hyperbolic Sretching Review
Hyperbolic Sretching Review United States
2020/4/3 上午 10:32:24 #

Great blog article.Really looking forward to read more. Will read on...

回覆

buy cbd oil uk
buy cbd oil uk United States
2020/4/3 下午 03:08:43 #

When I initially commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove me from that service? Appreciate it!|

回覆

cbd gummies near me
cbd gummies near me United States
2020/4/3 下午 06:33:36 #

amazing artile

回覆

Poker Terbaru
Poker Terbaru United States
2020/4/4 上午 07:18:37 #

Thanks-a-mundo for the blog post.Thanks Again. Much obliged.

回覆

cbd oil companies uk
cbd oil companies uk United States
2020/4/4 上午 10:24:29 #

amazing artile

回覆

cbd for sale
cbd for sale United States
2020/4/4 下午 02:54:45 #

{

回覆

where to buy CBD oil
where to buy CBD oil United States
2020/4/5 上午 12:40:29 #

Major thanks for the blog article.Much thanks again. Really Great.

回覆

Resurge Review
Resurge Review United States
2020/4/5 上午 01:13:08 #

I really liked your blog post. Cool.

回覆

hairdressing thinning scissors
hairdressing thinning scissors United States
2020/4/5 上午 10:38:47 #

Really appreciate you sharing this blog.Thanks Again. Keep writing.

回覆

pettral
pettral United States
2020/4/5 上午 11:09:07 #

Enjoyed every bit of your blog.Really looking forward to read more. Great.

回覆

buy cbd oil uk
buy cbd oil uk United States
2020/4/5 下午 07:15:49 #

amazing artile

回覆

Medical Suppliers
Medical Suppliers United States
2020/4/5 下午 09:37:32 #

Really informative article.Really thank you!

回覆

더킹카지노
더킹카지노 United States
2020/4/6 下午 01:03:58 #

Really informative blog article.Much thanks again. Great.

回覆

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List