今天公司培訓使用VSCode來編寫vuejs專案，拿了一個範例來展示，講的比較快，沒怎麼聽清楚。於是下來自己動手配置一下。

下載安裝並配置VSCode

隨便百度上搜個最新的VSCode安裝好後，點選Ctrl + Shit + X開啟外掛擴充套件視窗進行外掛擴充套件，這裡要安裝兩個外掛。

1、vetur外掛的安裝

該外掛是vue檔案基本語法的高亮外掛，在外掛視窗中輸入vetur點選安裝外掛就行，裝好後點擊檔案->首選項->設定 開啟設定介面，在設定介面右側新增配置

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue"
 
: "html"
}

2、eslint外掛的安裝

eslint智慧錯誤檢測外掛，在具體開發中作用很大，能夠及時的幫我們發現錯誤。至於安裝，同樣開啟外掛擴充套件視窗輸入eslint點選安裝外掛，裝好後也需要進行配置，在同vetur外掛一樣的地方進行配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

 "eslint.options": {
        "plugins": ["html"]
}

vetur和eslint外掛在配置中如下圖所示

匯入專案並編譯

1、匯入專案

從github上下載vuestic-admin專案（https://github.com/epicmaxco/vuestic-admin.git）,拉到本地後開啟VSCode直接檔案->開啟資料夾 匯入專案，在控制檯終端輸入npm install新增包依賴

如果沒有安裝npm請先安裝npm。

2、執行專案

同樣在終於執行npm run dev代表開始執行專案，這條命令會自動在瀏覽器上執行專案，執行結果如下圖所示，代表配置成功了。

有什麼不懂得，希望留言共同學習。