學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?
別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》
讓你的 Vue 專案更上一層樓!
今天要來介紹的是單一元件檔,單一元件檔在 Vue-cli 中被大量地使用,算是寫 Vue-cli 不可不知的一環,而在昨天我們安裝好 Vue-cli 環境後,可以看見 src 資料夾底下充滿著大量 .vue 結尾的檔案,大家或許會滿臉疑惑,因為前一兩周寫 Vue.js 根本沒有提到這個東西啊?那他到底是什麼呢?
其實顧名思義,單一元件檔(single-file-component)就是一個元件專屬的檔案,還記得我們當時使用 Vue.component
建立了一個全域環境的元件嗎?單一元件檔就好比把該元件所需的資訊封裝成一種檔案格式,透過 import
註冊到其他的檔案當中,最後以工具解析後,產生網頁能夠讀懂的相關靜態檔案(如 HTML、CSS、JavaScript 等等。)那他跟我們寫得全域性註冊元件差在哪呢?
當我們以 Vue.component 註冊元件會遇到的問題:
而在使用了單一元件檔之後:
除了以上使用單一元件檔後的差別,最重要是更能體現關注點分離的部分:
在之前程式開發時,關注點分離可能指的像是 HTML、CSS 以及 JavaScript 的檔案類型要分離的很乾淨,各司其職彼此井水不犯河水,不要在 HTML 裡面看到 inline 版本的 CSS 或是 JavaScript,而在 JavaScript 裡面可能不要去寫到 HTML 或是去定義樣式等等,然而近代前端開發的思維已逐漸邁向另一種元件化的思維。
元件化的思維,最主要的想法是在於要盡可能的把重複性高的程式碼,包裝成一個可重複利用的元件,並且裡面的樣式與功能可能都大同小異,差異在於帶進去的數值不同,因此返回不同的結果。以前端開發為例,可能就像是將每頁都會固定用到的 Navbar 區塊寫成一個可重複利用的檔案,以 HTML 定義好結構,用 CSS 替元件修飾一下外觀,最後用 JavaScirpt 提供更多元的功能等等;因此 HTML、CSS 與 JavaSciprt 基本上都會混和在一起。
而說了這麼多,單一元件檔到底要怎麼用呢?我們點開 Vue-cli 中的範例檔案 Hello.vue,可以看見該檔案中分成三個區塊,分別為 template
、script
和 style
:
<template>
// ...
</template>
<script>
// ...
</script>
<style>
// ...
</style>
template 區塊,如同之前我們寫元件時的 template 一樣,這裡主要是放置 HTML 結構與 Vue 指令、樣板指令的地點。
script 區塊,則是以往我們寫 JavaScript 的地方,而單一元件檔則是透過 export 指令匯出,使我們可以在其他元件檔中以 import 方式引入該元件。
style 區塊,這個地方是最令我開心的地方,因為我們將可以在這邊直接編寫如 SCSS 等 CSS 預處理器等工具,只要我們在安裝 Vue-cli 時有指定要選用這個選項即可無痛快速使用!
而實務上要怎麼應運這些區塊呢,明天我們將直接開發一個專案來當作範例!
寫的超G8詳細又簡單 看到一半就忍不住來留言 對完全沒碰nodeJs跟VUE過超級新手來說超級有用的 感謝感謝
Hi ofcourse448,很開心本系列文章對你有幫助,若對本系列中文章內容有什麼問題歡迎詢問!