本篇文章給大家介紹一下在VSCode中搭建并配置Vue環(huán)境，使用Vue的方法，希望對需要的朋友有所幫助！

Vue.js是一個流行的 JavaScript 庫，用于構(gòu)建 Web 應(yīng)用程序用戶界面，Visual Studio Code 內(nèi)置了對HTML、CSS和JavaScript的 Vue.js 構(gòu)建塊的支持。對于更豐富的 Vue.js 開發(fā)環(huán)境，您可以安裝支持 Vue.js IntelliSense、代碼片段、格式等的Vetur擴(kuò)展。

歡迎使用 Vue #

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

要安裝和使用 Vue CLI 以及運(yùn)行 Vue 應(yīng)用程序服務(wù)器，您需要安裝Node.js JavaScript 運(yùn)行時和npm（Node.js 包管理器）。npm 包含在 Node.js 中，您可以從Node.js 下載安裝它。

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

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

npm install -g @vue/cli

這可能需要幾分鐘的時間來安裝。您現(xiàn)在可以通過鍵入以下內(nèi)容來創(chuàng)建一個新的 Vue.js 應(yīng)用程序：

vue create my-app

my-app您的應(yīng)用程序文件夾的名稱在哪里。系統(tǒng)將提示您選擇一個預(yù)設(shè)，您可以保留默認(rèn)值(babel, eslint)，這將使用Babel將 JavaScript 轉(zhuǎn)換為與瀏覽器兼容的 ES5 并安裝ESLint linter以檢測編碼錯誤。創(chuàng)建 Vue 應(yīng)用程序并安裝其依賴項可能需要幾分鐘時間。

讓我們通過導(dǎo)航到新文件夾并鍵入npm run serve以啟動 Web 服務(wù)器并在瀏覽器中打開應(yīng)用程序來快速運(yùn)行我們的 Vue 應(yīng)用程序：

cd my-app npm run serve

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

yarn install npm install npm run pre

您應(yīng)該在瀏覽器中的http://localhost:8080上看到“歡迎使用您的 Vue.js 應(yīng)用程序” 。您可以按Ctrl+C停止vue-cli-service服務(wù)器。

要在 VS Code 中打開您的 Vue 應(yīng)用程序，請從終端（或命令提示符）導(dǎo)航到該my-app文件夾并鍵入code .：

cd my-app code .

VS Code 將在文件資源管理器中啟動并顯示您的 Vue 應(yīng)用程序。

Vetur 擴(kuò)展#

現(xiàn)在展開src文件夾并選擇App.vue文件。您會注意到 VS Code 沒有顯示任何語法突出顯示，并且將文件視為純文本，如右下方狀態(tài)欄中所示。您還將看到一條通知，為文件類型推薦Vetur擴(kuò)展名.vue。

Vetur 擴(kuò)展為 VS Code 提供了 Vue.js 語言功能（語法高亮、智能感知、片段、格式）。

從通知中，按安裝以下載并安裝 Vetur 擴(kuò)展。您應(yīng)該在擴(kuò)展視圖中看到 Vetur 擴(kuò)展正在安裝。安裝完成后（可能需要幾分鐘），安裝按鈕將變?yōu)?strong>管理齒輪按鈕。

現(xiàn)在您應(yīng)該看到這.vue是 Vue 語言的可識別文件類型，并且您擁有語法高亮、括號匹配和懸停描述等語言功能。

智能感知#

當(dāng)您開始輸入 時App.vue，您將看到針對 HTML 和 CSS 以及 Vue.js 特定項目（如Vue部分中的聲明 ( v-bind, v-for) ）的智能建議或補(bǔ)全template：

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

轉(zhuǎn)到定義，查看定義#

VS Code 通過 Vue 擴(kuò)展語言服務(wù)還可以通過Go to Definition ( F12 ) 或Peek Definition ( Alt+F12 )在編輯器中提供類型定義信息。將光標(biāo)放在 上App，右鍵單擊并選擇Peek Definition。一個偷看窗口將打開，顯示的App自定義App.js。

按Escape關(guān)閉 Peek 窗口。

你好，世界！#

讓我們將示例應(yīng)用程序更新為“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）后，使用 重新啟動服務(wù)器，npm run serve您將看到“Hello World！”。在我們繼續(xù)學(xué)習(xí) Vue.js 客戶端調(diào)試的同時讓服務(wù)器保持運(yùn)行。

提示：VS Code 支持自動保存，默認(rèn)情況下會在延遲后保存您的文件。檢查文件菜單中的自動保存選項以打開自動保存或直接配置用戶設(shè)置。files.autoSave

Linting#

Linter 會分析您的源代碼，并可以在您運(yùn)行應(yīng)用程序之前就潛在問題向您發(fā)出警告。Vue ESLint 插件 ( eslint-plugin-vue ) 檢查 Vue.js 特定的語法錯誤，這些錯誤在編輯器中顯示為紅色波浪線，也顯示在問題面板中（查看>問題 Ctrl+Shift+M）。

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

調(diào)試#

您可以使用內(nèi)置的 JavaScript 調(diào)試器調(diào)試客戶端 Vue.js 代碼。您可以從VS Code 調(diào)試食譜網(wǎng)站上的 VS Code 中的Vue.js 調(diào)試食譜中了解