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

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

Vue.js是一個(gè)流行的 JavaScript 庫(kù)，用于構(gòu)建 Web 應(yīng)用程序用戶界面，Visual Studio Code 內(nèi)置了對(duì)HTML、CSS和JavaScript的 Vue.js 構(gòu)建塊的支持。對(duì)于更豐富的 Vue.js 開(kāi)發(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)行時(shí)和npm（Node.js 包管理器）。npm 包含在 Node.js 中，您可以從Node.js 下載安裝它。

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

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

npm install -g @vue/cli

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

vue create my-app

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

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

cd my-app npm run serve

注意：如果啟動(dòng)報(bào)錯(cuò)，可能是沒(méi)有安裝相關(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 中打開(kāi)您的 Vue 應(yīng)用程序，請(qǐng)從終端（或命令提示符）導(dǎo)航到該my-app文件夾并鍵入code .：

cd my-app code .

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

Vetur 擴(kuò)展#

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

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

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

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

智能感知#

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

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

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

VS Code 通過(guò) Vue 擴(kuò)展語(yǔ)言服務(wù)還可以通過(guò)Go to Definition ( F12 ) 或Peek Definition ( Alt+F12 )在編輯器中提供類(lèi)型定義信息。將光標(biāo)放在 上App，右鍵單擊并選擇Peek Definition。一個(gè)偷看窗口將打開(kāi)，顯示的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）后，使用 重新啟動(dòng)服務(wù)器，npm run serve您將看到“Hello World！”。在我們繼續(xù)學(xué)習(xí) Vue.js 客戶端調(diào)試的同時(shí)讓服務(wù)器保持運(yùn)行。

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

Linting#

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

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

調(diào)試#

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