手把手教你怎麼在VSCode中設定並使用Vue

Vue.js是一個流行的 JavaScript 庫，用於構建 Web 應用程式使用者介面，Visual Studio Code 內建了對HTML、CSS和JavaScript的 Vue.js 構建塊的支援。對於更豐富的 Vue.js 開發環境，您可以安裝支援 Vue.js IntelliSense、程式碼片段、格式等的Vetur擴充套件。

歡迎使用 Vue #

我們將在本教學中使用Vue CLI。如果您是 Vue.js 框架的新手，您可以在vuejs.org網站上找到很棒的檔案和教學。

要安裝和使用 Vue CLI 以及執行 Vue 應用程式伺服器，您需要安裝Node.js JavaScript 執行時和npm（Node.js 包管理器）。npm 包含在 Node.js 中，您可以從Node.js 下載安裝它。

提示：要測試您的機器上是否正確安裝了 Node.js 和 npm，您可以輸入node --version和npm --version。

要vue/cli在終端或命令提示字元中安裝, 鍵入：

npm install -g @vue/cli

這可能需要幾分鐘的時間來安裝。您現在可以通過鍵入以下內容來建立一個新的 Vue.js 應用程式：

vue create my-app

my-app您的應用程式資料夾的名稱在哪裡。系統將提示您選擇一個預設，您可以保留預設值(babel, eslint)，這將使用Babel將 JavaScript 轉換為與瀏覽器相容的 ES5 並安裝ESLint linter以檢測編碼錯誤。建立 Vue 應用程式並安裝其依賴項可能需要幾分鐘時間。

讓我們通過導航到新資料夾並鍵入npm run serve以啟動 Web 伺服器並在瀏覽器中開啟應用程式來快速執行我們的 Vue 應用程式：

cd my-app
npm run serve

注意：如果啟動報錯，可能是沒有安裝相關包，可以執行yarn install或者npm install或者npm run pre試試：

yarn install
npm install
npm run pre

您應該在瀏覽器中的http://localhost:8080上看到「歡迎使用您的 Vue.js 應用程式」 。您可以按Ctrl+C停止vue-cli-service伺服器。

要在 VS Code 中開啟您的 Vue 應用程式，請從終端（或命令提示字元）導航到該my-app資料夾並鍵入code .：

cd my-app
code .

VS Code 將在檔案資源管理器中啟動並顯示您的 Vue 應用程式。

Vetur 擴充套件#

現在展開src資料夾並選擇App.vue檔案。您會注意到 VS Code 沒有顯示任何語法突出顯示，並且將檔案視為純文字，如右下方狀態列中所示。您還將看到一條通知，為檔案型別推薦Vetur擴充套件名.vue。

Vetur 擴充套件為 VS Code 提供了 Vue.js 語言功能（語法高亮、智慧感知、片段、格式）。

從通知中，按安裝以下載並安裝 Vetur 擴充套件。您應該在擴充套件檢視中看到 Vetur 擴充套件正在安裝。安裝完成後（可能需要幾分鐘），安裝按鈕將變為管理齒輪按鈕。

現在您應該看到這.vue是 Vue 語言的可識別檔案型別，並且您擁有語法高亮、括號匹配和懸停描述等語言功能。

智慧感知#

當您開始輸入 時App.vue，您將看到針對 HTML 和 CSS 以及 Vue.js 特定專案（如Vue部分中的宣告 ( v-bind, v-for) ）的智慧建議或補全template：

和 Vue 屬性 ( methods, computed)scripts部分：

轉到定義，檢視定義#

VS Code 通過 Vue 擴充套件語言服務還可以通過Go to Definition ( F12 ) 或Peek Definition ( Alt+F12 )在編輯器中提供型別定義資訊。將遊標放在 上App，右鍵單擊並選擇Peek Definition。一個偷看視窗將開啟，顯示的App自定義App.js。

按Escape關閉 Peek 視窗。

你好，世界！#

讓我們將範例應用程式更新為「Hello World！」。在App.vue更換了HelloWorld元件msg與自定義屬性文字「Hello World！」。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Hello World!"/>
  </div>
</template>

儲存App.vue檔案（Ctrl+S）後，使用 重新啟動伺服器，npm run serve您將看到「Hello World！」。在我們繼續學習 Vue.js 使用者端偵錯的同時讓伺服器保持執行。

提示：VS Code 支援自動儲存，預設情況下會在延遲後儲存您的檔案。檢查檔案選單中的自動儲存選項以開啟自動儲存或直接設定使用者設定。files.autoSave

Linting#

Linter 會分析您的原始碼，並可以在您執行應用程式之前就潛在問題向您發出警告。Vue ESLint 外掛 ( eslint-plugin-vue ) 檢查 Vue.js 特定的語法錯誤，這些錯誤在編輯器中顯示為紅色波浪線，也顯示在問題面板中（檢視>問題 Ctrl+Shift+M）。

當 Vue linter 在模板中檢測到多個根元素時，您可以在下面看到一個錯誤：

偵錯#

您可以使用內建的 JavaScript 偵錯程式偵錯使用者端 Vue.js 程式碼。您可以從VS Code 偵錯食譜網站上的 VS Code 中的Vue.js 偵錯食譜中瞭解更多資訊。

注意：當前 vue-cli 生成的 sourcemaps 存在問題，這會導致 VS Code 中的偵錯體驗出現問題。參見https://github.com/vuejs/vue-loader/issues/1163。

另一個用於偵錯 Vue.js 的流行工具是vue-devtools外掛。

其他擴充套件#

Vetur 只是可用於 VS Code 的眾多 Vue.js 擴充套件之一。您可以通過鍵入「vue」在「擴充套件」檢視 ( Ctrl+Shift+X ) 中進行搜尋。

還有一些擴充套件包捆綁了其他人發現對 Vue.js 開發有用的擴充套件。

更多關於VSCode的相關知識，請存取：！！

以上就是手把手教你怎麼在VSCode中設定並使用Vue的詳細內容，更多請關注TW511.COM其它相關文章！