目前，前端開發工具非常多，如Webstorm 、Atom 、HBuilder 、Visual Studio Code 、Sublime Text 、Notepad++ 等。對於有經驗的開發者來說，使用哪一款工具都可以。筆者習慣使用Visual Studio Code 。

Visual Studio Code 簡稱VScode 。VScode 是微軟釋出的一款功能完備、免費開源的現代輕量級程式碼編輯器，可用於編碼、除錯、測試和部署到任何平臺。這款程式碼編輯器可以同時支援多種語言，比如常見的Python 、R 、SQL 等，還可以支援Markdown 語言。除了可以支援豐富的語言外，還可以安裝各種外掛。下面一起來學習VScode 的安裝。

軟體安裝

安裝VScode 非常簡單，首先從官網（），選擇對應作業系統的安裝包進行下載。如圖1.18 所示，

圖1.18 VScode 官網下載頁面

然後雙擊開啟下載好的安裝包，根據提示傻瓜式安裝即可。

開啟VScode ，可以看到介面主要分為5 個區域，分別是活動欄、側邊欄、編輯欄、皮膚欄、狀態列，如圖1.19 所示。

圖1.19 VScode 主介面

外掛安裝

VScode 提供了豐富的外掛，輔助開發者快速編輯和開發。

VScode 外掛的安裝方法也很簡單，可以線上安裝，也可以離線安裝。

線上安裝是在聯網的情況下直接從VScode 擴充套件程式中進行搜尋安裝，是較為方便的一種安裝方式。安裝步驟如圖1.20 所示。

圖1.20 線上安裝VScode 外掛

如果線上安裝外掛失敗，可以考慮離線安裝。離線安裝是指先從官網或其他有效地址下載對應的外掛，然後透過擴充套件程式從VSIX 選單選擇下載好的外掛進行安裝。離線安裝步驟如圖1.21 所示。

圖1.21 VScode 外掛離線安裝方式

外掛安裝後，根據需要重啟VScode 完成安裝。本書所有章節的程式碼都透過VScode 編寫的，所以在開始之前，筆者推薦在VScode 中安裝以下外掛來輔助我們開發Vue 3 專案：

（1 ）Chinese (Simplified) （簡體中文）Language Pack for Visual Studio Code ：VScode 預設是英文語言環境，安裝這個外掛可以將VScode 介面變成中文語言環境，方便中文開發者使用VScode 。

（2 ）Vue Language Features (Volar) ：也許有人熟悉Vetur ，它是Vue 2.x 的配套外掛，主要用於對Vue 單檔案元件提供語法高亮、語法支援以及語法檢測。它還內建了Emmet 外掛的所有功能，支援快捷輸入程式碼，但它不支援Vue 3 的很多新特性，如Vue 3 不再需要根標籤，繼續使用Vetur ，在單頁應用中不寫根標籤時Vetur 會報錯，所以完美支援Vue 3 的外掛Volar 出世，它在功能上與Vetur 一致。如果同時安裝了Vetur 和Volar ，使用Volar 時建議禁用Vetur 。

（3 ）Vue 3 Snippets ：這個外掛基於最新的Vue 2 及Vue 3 的 API 新增了程式碼片段，在文字輸入時提供輸入建議。

（4 ）Eslint ：它是最常用的程式碼檢查外掛。

（5 ）Auto Rename Tag ：可以自動完成另一側標籤的同步修改。

（6 ）Path Intellisense ：路徑自動補全工具，可以在輸入部分路徑後提示路徑，使輸入更加方便。

（7 ）Bracket Pair Colorizer ：括號匹配工具，可以將不同級別的括號使用不同的顏色標記，成對的括號用相同的顏色標記，程式碼塊起始位置一目瞭然。

第一個完整版的Vue+Element Plus 示例

本節將編寫一個簡單的計數器完整版示例【例1.2 】，瞭解Vue 和Element 如何組合使用。

【例1.2 】第一個完整版的Vue+Element 示例

筆者在第一個Vue 示例【例1.1 】的基礎上進行修改，最後hello-vue.html 內容如下：

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04    <meta charset="UTF-8">
05    <meta http-equiv="X-UA-Compatible" content="IE=edge">
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <title>Hello Vue</title>
08    <link rel="stylesheet" href="
09  </head>
10  <body>
11    <div id="app">
12      <h1>{{title}}</h1>
13      <el-button type="primary" @click="handleClick">點我</el-button>
14      <p>計數{{count}}</p>
15    </div>
16    <script src="
17    <script src="
18    <script type="text/javascript">
19      const App = {
20        data() {
21          return {
22            title: 'Hello Vue',
23            count: 0
24          }
25        },
26        methods:{
27          handleClick() {
28            this.count++;
29          }
30        }
31      }
32      Vue.createApp(App).use(ElementPlus).mount('#app')
33    </script>
34  </body>
35  </html>

該程式碼片段做了以下改動：

第08 行，在head 標籤內引入了ElementPlus 的樣式檔案。

第13 行，在body 中引入了一個Element Button 按鈕元件（el-button ），並繫結了一個單擊事件@click ，繫結了一個叫hanleClick 的處理方法，然後在el-button 之後顯示計數值count 。

第17 行，在body 引入Vue 檔案後，引入ElementPlus 檔案。

第23 行，在body 主要指令碼data 中定義一個叫count 的屬性，記錄計數值。

第27~29 行，在body 主要指令碼中新增一個methods 屬性，並定義一個handleClick 處理方法，該方法使計數值count 自加1 。

第32 行，在body 主要指令碼最後透過use 方法繫結ElementPlus 到應用上。

最後在瀏覽器開啟hello-vue.html 檔案，可以看到顯示結果，如圖1.22 所示（每單擊一次按鈕，顯示的數字加1 ）。

圖1.22 第一個完整版Vue+ElementPlus 示例

和第一個Vue 例項一樣，在大專案開發過程中，筆者建議讀者在工程化專案中使用Element 。其原理和這個簡單例項是一樣的。後續實戰章節將會帶領讀者一起用工程化思路完成專案實踐。

--------------------------

本文節選自《 Vue 3.x+Element Plus 前端開發實戰》，獲得作者和出版社授權釋出。

Vscode開發第一個Vue+Element Plus示例

相關文章