圖片來源

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

參考資料

• Vuetify: Server side rendering