iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
1

Imgur

圖片來源

Vuetify 簡介

Vuetify 是一個語意化元件的前端框架,提供簡潔、直觀、易於重複使用的元件,使 Vue 的開發者可以輕鬆解決前端的問題。

Vuetify 是根據 Google 的 Material Design Spec 建立,支援大部分瀏覽器(IE11+, Safari 9+),支援SSR(Server Side Render),提供完整的社群和文件。

快速開始

先看一個簡單範例

style link:

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

html:

<div id="app">
  <v-app>
    <main>
      <v-container>Hello world</v-container>
    </main>
  </v-app>
</div>

script tag:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

javascript:

new Vue({
  el: '#app'
})

專案使用

npm install vuetify

若要包含樣式的話可以將以下兩個link放入index.html中。

或是在 webpack 入口 import:

require('/path/to/node_modules/vuetify/dist/vuetify.min.css')

另外記得在 webpack config 加入 css-loader。

建立新應用程式

若需要建立一個新的專案,Vuetify 提供了 8 種 Vue CLI 模板:

  • Simple HTML
  • Webpack
  • Webpack Advanced
  • Webpack SSR
  • NUXT
  • PWA
  • Electron
  • A La Carte

建立 Webpack SSR 應用

這邊就選用 Webpack SSR 當作範例

首先記得安裝 Vue CLI:

npm install -g vue-cli

選擇 webpack-ssr 這個模板設定

vue init vuetifyjs/webpack-ssr
npm install
npm run dev

先介紹一下目錄結構:

  • project
    • assets

    • build

    • components

    • mixins

    • pages

    • router

    • static

    • store

參考資料


上一篇
用範例理解 Vue.js #18:Slot
下一篇
用範例理解 Vue.js #20:vue-router in Vuetify
系列文
用範例理解 Vue.js30

1 則留言

我要留言

立即登入留言