探索 Vuetify 介面框架(上)

認識 Vuetify & 搭建環境

📢 Vuetify系列文章分為上、下 (共 2 篇)

📋 目錄

1. Vuetify 介紹
2. 搭建環境 & Vuetify 安裝
3. 專案結構說明
4. [實作] 專案練習介紹

Vuetify 介紹

Vuetify 由 John Leider 及一群團隊所創建及維護(並非 Vue 官方提供)。開發人員能夠在應用程序中，藉由組件創建可複用的簡潔模塊，UI library 即是這些模塊的集合，並為這些模塊實現了特定的樣式準則。Vuetify 是一個基於 Vue 的 CSS 框架(UI library)，風格依循 Google Material Design 開發。

搭建環境 & Vuetify 安裝

1. 安裝Node.js

🔎 Node官網下載
開起終端機並輸入以下內容，如有顯示版號則表示安裝成功。

• node: node -v
• npm: npm -v

🔖 補充說明
node.js:能夠在伺服器端運行JavaScript的開放原始碼、跨平台執行環境。
npm:隨同node.js一起安裝的管理工具，進行套件的安裝及管理。

2. 安裝Vue

🔎 Vue.js官網下載(此範例屬 Vue2 版本)
使用 Vue 構建大型應用時，推薦使用 NPM 安裝。

$ npm install vue

NPM 能很好地和諸如 Webpack 或 Browserify 的CommonJS模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。

🔖 補充說明
使用Vue構建小型應用，可用cdn方式引用至html檔案。
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

3. 安裝Vue CLI

Vue CLI 由 Vue.js 團隊開發，提供開發者快速建置 Vue 專案並整合相關工具鍊的指令列(Command Line)工具。內建 Hot Reload、 ES Lint 與 dec-Server等功能。

$ npm install -g @vue/cli

4. 建立Vue專案

開起終端機至欲建立專案的路徑，輸入下方指令。
(my-vuetify-project 為範例專案名稱，可以修改成自己想要的檔名)

$ vue create my-vuetify-project

建立的過程中會出現：

❓Please pick a preset:
➡️ Default ([Vue 2] babel, eslint)

🔖 補充說明
Babel:JavaScript 轉譯器，可將ES6+程式碼轉為等效的ES5程式碼
Linter/Formatter:編碼風格檢查

終端機輸入下方指令：

$ cd my-vuetify-project
$ npm run serve

開啟瀏覽器，網址輸入 http://localhost:8080 首頁如下：

5. 安裝Vuetify

Vuetify 並非 Vue.js 官方團隊開發與維護，所以需要另外安裝。新增一個終端機視窗，至專案所在路徑再輸入下方指令：

$ vue add vuetify
$ npm install --save vuetify

安裝的過程中會出現：

❓Choose a preset:
➡️ Default (recommended)

此時瀏覽器 http://localhost:8080 首頁，已置換如下：

專案結構說明

專案結構介紹如上圖，接著查看幾個檔案 🔎

main.js
可以看到 vuetify 被引用。

App.vue
預設畫面的所有內容包在 <v-app> </v-app> 之中，後續改動也都放在裡面。

plugins/vuetify.js
Vuetify 是插件，在 Vue 對象中進行註冊，使用 Vue.use() 進行註冊。(前面安裝時已預先註冊)有關 vuetify 設定會改動此檔案。

[實作] 專案練習介紹

專案建立好，接下來會是做中學的模式🛠

🚩 由於 Vuetify 學習重點在於 UI 框架使用，而非 Vue.js 基本練習。本系列將基於預設檔案上，加入預先準備專案的 GitHub 檔案 🔗 (專案資料夾名稱：vue-example-Employees)，直接著手修改下載的檔案。

🚩 實作練習的主題設定為 Employee Data。一個記錄員工的系統，在上方表格輸入欲新增的員工資訊，按下 Send 按鈕會把資料新增在下方表格。由於本系列練習重點在於 UI 框架使用，有關呼叫 methods 動作的程式碼都先省略，在本系列文章的最後會附上完整功能程式碼。

🚩 Vuetify 實作練習將會延用此檔案，請先將下載的檔案，妥善地加到 Vuetify 專案中。src/components 兩個檔案搬動到專案中，刪除原有的 HelloWorld.vue 。 App.vue 檔案中的 <script> 標籤直接搬動，並在 <v-main> 標籤中引入的兩個 component。
App.vue 檔案完整程式碼如下：

此時瀏覽器的畫面如下：

畫面有些陽春，下一個章節將對 Employee Data 做許多樣式調整 🔪
在前往下個章節前，先偷窺一眼樣式調整完的成果 👀

🚪 前往下一章節：探索 Vuetify 介面框架(下)

🔩 Ready to fix the broken parts?