Vscode開發第一個Vue+Element Plus示例
目前，前端開發工具非常多，如Webstorm、Atom、HBuilder、Visual Studio Code、Sublime Text、Notepad++等。對于有經驗的開發者來說，使用哪一款工具都可以。筆者習慣使用Visual Studio Code。
Visual Studio Code簡稱VScode。VScode是微軟釋出的一款功能完備、免費開源的現代輕量級代碼編輯器，可用于編碼、調試、測試和部署到任何平台。這款代碼編輯器可以同時支援多種語言，比如常見的Python、R、SQL等，還可以支援Markdown語言。除了可以支援豐富的語言外，還可以安裝各種插件。下面一起來學習VScode的安裝。
1.6.1 軟體安裝
安裝VScode非常簡單，首先從官網（https://code.visualstudio.com/Download），選擇對應作業系統的安裝包進行下載下傳。如圖1.18所示，
圖1.18 VScode官網下載下傳頁面
然後輕按兩下打開下載下傳好的安裝包，根據提示傻瓜式安裝即可。
打開VScode，可以看到界面主要分為5個區域，分别是活動欄、側邊欄、編輯欄、面闆欄、狀态欄，如圖1.19所示。
圖1.19 VScode主界面
1.6.2 插件安裝
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：括号比對工具，可以将不同級别的括号使用不同的顔色标記，成對的括号用相同的顔色标記，代碼塊起始位置一目了然。
1.6.3 第一個完整版的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="https://unpkg.com/element-plus/dist/ index.css" />
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="https://unpkg.com/[email protected]/dist/vue.global.js"> </script>
17 <script src="https://unpkg.com/element-plus"></script>
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前端開發實戰》，獲得作者和出版社授權釋出。
Vue.js 3.x+Element Plus前端開發實戰（Web前端技術叢書）
Vue.js 3.x+Element Plus前端開發實戰（Web前端技術叢書） - 京東
Vue.js 3.x+Element Plus前端開發實戰 - 當當