進擊中的Vue 3——“電動車電池範圍計算器”開源專案

葡萄城技術團隊發表於2021-04-29

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

原文參考:https://dzone.com/articles/build-a-tesla-battery-range-calculator-yourself-it

 

今天,我們給大家帶來的是一個基於vue3的開源專案:電動車電池範圍計算器。這是一個workshop,通過完成該專案,我們可以直觀的感受到vue3的強大,瞭解一些專案最佳實踐。

專案的背景是當前備受關注的電動車。經歷了近6年的發展,電動車在市場上得到大規模普及,從“大玩具”變為未來交通的基石。專案以電動車行業最受關注的續航能力為例,使用vue3技術構建一個電池範圍計算器,來展示用Vue.js製作儀表盤的開發方式和體驗。

環境準備

在開始閱讀本教程之前,我們需要做以下準備,搭建好專案環境:

  1. 安裝穩定的Node.js版本8.9或者更高版本(https:// nodejs.org/en/download/)
  2. 安裝Yarn (https://yarnpkg.com)
  3. 克隆此Github儲存庫https://github.com/petereijgermans11/workshop-reactjs-vuejs

 

環境準備完畢,我們可以讀取README.md瞭解專案的概況。

與常見的開發專案不同,這個專案最有意思的地方在於,它不是一個最終的應用程式,而是一個存在缺陷的應用程式,即workshop。我們需要對它進行修復完善並進一步開發,並在這個過程中掌握vue開發技巧。

在正式開始工作之前,讓我們先一起來了解一下這個專案的結構。

專案結構介紹

workshop-reactjs-vuejs/vuejs-app/src是workshop的原始碼目錄,結構如下圖所示。main.js是應用程式的入口點,App.vue是應用程式的輸入元件。

(專案原始碼結構)

專案入口

相比於vue2,Vue3應用程式的建立方式已更改,需要匯入新的createApp()方法,而不是使用new Vue(),然後呼叫這個方法來傳遞App.vue元件(入口元件)。

緊接著我們將在createApp上呼叫mount方法,並傳遞一個CSS選擇器標識mount元素,這個過程和在Vue 2中操作$ mount示例方法一樣

 

(專案入口)

App.vue元件詳解

                     (app.vue元件)

App.vue是應用程式的入口元件,由以下部分組成。

1.   指令碼

在上圖中,name property 表示元件的名稱(名稱為“ app”)。該元件使用的子元件在中定義components-property。在這裡,TeslaBattery是App.vue元件的子元件,後面會介紹到。要使用TeslaBattery元件,必須首先將其匯入(import Tesla-Battery from  "..." )

在中data()-function,我們可以定義和初始化狀態變數,例如匯入的徽標和greeting屬性。要呈現徽標和問候語,必須在模板中定義它們。最終必須(通過export default { }  )匯出整個元件,以便可以將其再次匯入到其他元件和main.js中。

2.   模板

模板負責定義元件生成的輸出。Vue.js 使用基於HTML的模板語法可以使資料通過data ()-function進行繫結並輕鬆呈現。資料繫結的最簡單形式是使用Mustache語法(雙括號)的文字插值:{{greeting}}  

在上面的示例中,{{greeting}}  替換Hello Tesla !!! 成為和data()-function相關的值。在此問候語上方,用img-tag來呈現徽標。要將徽標分配給img src-attribute,用屬性進行繫結。在此應用程式中經常使用屬性繫結,可以使用: v-bind   <img :src="logo"<img v-bind:src="logo">  進行繫結

最後,使用<tesla battery>-tag來例項化TeslaBattery元件並進行渲染。對於此標籤必須使用Kebab case,這一部分我們會在後面詳細討論

3.   樣式

在Vue中,我們使用SCSS檔案對整個應用進行樣式設定,這裡不展開介紹。

Container vs Presentation元件

介紹完基礎的專案架構,我們來看專案的UI部分是怎麼執行的。該應用程式包含一個入口應用程式元件,該元件包含一個子元件TeslaBattery。TeslaBattery子元件包含以下二級子元件:

l  TeslaCar:使用車輪動畫渲染TeslaCar影像。

l  TeslaStats:用於渲染每個Tesla模型的最大電池範圍。涉及以下型號:60、60D,75、75D,90D和P100D。

l  TeslaCounter:手動控制速度和外部溫度。

l  TeslaClimate:當外部溫度超過20度時,將供暖改為空調。

l  TeslaWheels:手動將車輪尺寸從19英寸調整為20英寸。

這些元件最終構成了使用者看到的儀表盤。

(最終展示的儀表盤)

以下程式碼塊清晰的顯示了元件的層級關係,專案中同時用到了Container元件和Presentation元件。“ Tesla電池元件”是容器元件。基礎子元件是Presentation元件。這樣可將元件分為兩類,有利於我們在開發過程中重複使用。

(元件層級)

兩種元件的特點對比如下:

Container元件

l  可以同時包含表示和容器元件。

l  通過“道具”建立資料並將資料傳輸到子元件。

l  基於傳入事件執行邏輯。

l  進行狀態管理,並知道進行元件渲染的時間。

l  具有狀態屬性,並傾向於充當資料來源。

Presentation元件

l  演示元件也稱為“啞元件”,使用者介面是其重點部分。

l  TeslaCar是一個啞元件,可確保渲染TeslaCar影像。

l  通過“ props”接收資料,並通過事件將資料返回給父元件。

l  通常沒有狀態,也不依賴於其餘的應用程式。

(元件樹)

此劃分方法具有以下優點,值得推薦。

l  重用性高

l  啞元件更易於測試:僅接收“道具”,發出事件並返回一部分UI

l  可讀性高:程式碼少且組織清晰,容易理解和進行調整

l  內容提供一致並防止了程式碼重複

通過Props將資料傳遞給子元件

在下圖中可以看出,我們使用props,將stats-data(源自stats()函式)從TeslaBattery元件傳遞到TeslaStats元件,連結起上下級元件。

(使用props傳遞資料)

具體操作上,你需要在TeslaBattery元件模板中使用v-bind或冒號操作符。

(傳遞stats資料)

該元件在指令碼部分包含一個props-property,用於接收stats-data。該屬性的資料型別為陣列。在本例中,我們使用來自Vue.js的v-for指令來遍歷統計資訊,按照特定順序進行展示。

我們可以在filters-property中定義自定義過濾器。例如,過濾器“lowercase”,可以用小寫呈現模型名。在專案中,我們自定義了一個過濾器,把英里轉換為公里。

代替filters-property的Composition API

在Vue 3中,我們無法再使用filters-property。為了開發“把英里轉換為公里”的過濾器,我們需要使用Compostion API。Compostion API是基於函式的API,通常用於組合與重用各元件的邏輯。

 

首先,我們需要建立一個JavaScript檔案composable.js,export出我們需要使用的資料和方法如,“把英里轉換為公里”的過濾器。

(封裝過濾器的程式碼)

然後,我們將composable.js匯入到需要使用該過濾器的元件中,就可以在其中使用這些過濾器了。

(匯入並啟用過濾器的程式碼)

使用v-model實現雙向資料繫結

在Vue3中,我們可以使用各元件的模板中的v-model指令實現雙向資料繫結。

在這個專案中, TeslaCounter元件需要將速度(speed)繫結到TeslaBattery元件。

(元件間的雙向資料繫結)

我們在TeslaBattery元件模板中使用v-model指令將speed屬性(車速)繫結到TeslaCounter元件。

(使用v-model傳遞資料的程式碼)

 

作為接收元件,TeslaCounter則需要在props中接受modelValue屬性。此外,還需要emit出@update:modelValue事件,用於通知資料變更。emit操作在increment()方法中觸發,在速度發生變化時,將最新的資料“推送”給其繫結的TeslaBattery元件。

(emit事件通知的程式碼)

總結

以上就是開源專案電動車電池範圍計算器中原始碼的核心介紹,專案中還有更多優秀的實踐值得大家學習和參考。

除此之外,專案中還新增了一個PPT檔案,詳細說明了諸如通過v-model指令進行雙向資料繫結、使用按鈕向事件分配事件以及建立其他元件之類的做法。

後續我們還會為大家推薦更多有意思的開源專案,一起了解vue等前端技術的發展與實戰。

 

相關文章