iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
3

Vuetify
我們在完成了API開發以後,以及前端的串接後,接下來會開始著手進行畫面的繪製,大家也都知道畫面的呈現與HTML和CSS脫離不了關係,當然我們在網路上可以找許多的CSS可以套用比較有名的像是耳熟能詳的BootstrapMaterializeBulma...等等,都可以幫助你快速建立網站樣式。

本篇鐵人賽文章使用Vuetify 版本1.0.0-beta2

Hi, Vuetify

Vuetify是一個Based on Vue的CSS Framework,在一些主流的CSS Framework中,大多設計都是參考Google Material Design,裡面提供了一些關於UI設計的主流方向與設計經驗,不難看出來Vuetify的CSS設計也是這種金屬風。

Vuetify提供了許多的工具來幫助使用者開發,不管你是想要開發SPA(single page application)、PWA(progressive web application)還是SSR(server-side rendering)都可以透過Vuetify幫助你開發

他支援了主流的流覽器,不用多想IE10以下不支援,IE11須透過polyfill。

官方網站很貼心的準備Vuetify Starter的CodePen,給第一次接觸的新手

如果你只是單純要使用vuetify的library,只需要在HTML引入(記得Vue.js也要引入阿)

<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

或是你用nodejs來實作你的網站請參考 QuickStart

Vuetify的作者有話想跟你說

Author

小小練習

這次小小的練習,一樣使用我們之前開發的API,與axios的練習,透過Vuetify我們可以不用花很多時間在研究CSS,也能與Vue搭配得天衣無縫。
省略了前面引入的檔案與AJAX檔案

<body>
  <div id="app">
    <v-app>
      <v-container>
        <v-list two-line>
          <template v-for="teacher in teachers">
            <v-list-tile-content>
              <v-list-tile-title>{{ teacher.TeacherName }}</v-list-tile-title>
              <v-list-tile-sub-title>{{ teacher.TeacherTel }}</v-list-tile-sub-title>
            </v-list-tile-content>
            <v-divider></v-divider>
          </template>
        </v-list>
      </v-container>
      <v-btn large color="success" @click="getAllTeacher">查詢所有老師</v-btn>
    </v-app>
  </div>
</body>
new Vue({
  el: '#app',
  data: {
    teachers: []
  },
  methods: {
    getAllTeacher: function(){
      let self = this;
      axios({
        methods: 'get',
        url: 'http://localhost:8080/ironSchool/teacher'
      })
      .then((resp) => {
        self.teachers = resp.data;
      });
    }
  }
})

css


參考資料
Vuetify
Vuetify Github

我的好友Hunter在這一次的鐵人賽也有寫Vuetify相關的文章,歡迎大家去看看


減肥專欄 (停刊中)


每日一句

穿上黑絲襪的感覺,就像你寫完了一個專案
看著鏡子中的自己(程式碼),Ohhhh!怎麼那麼性感
By 黑絲工程師

你穿上黑絲了嗎?
Pinterest
(Pic From Pinterest)


上一篇
Day27 不專業翻譯 2018的行動UX設計趨勢(下)
下一篇
Day29 我有一個寫糞扣的好朋友
系列文
Go!從無到打造最佳行動網站30

尚未有邦友留言

立即登入留言