手把手教你怎么在VSCode中配置并使用Vue

本篇文章給大家介紹一下在VSCode中搭建并配置Vue環境，使用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 調試食譜中了解