下載安裝並配置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直接檔案->開啟資料夾 匯入專案，Ctrl+shift+Y撥出控制檯，在控制檯終端輸入npm install新增包依賴 

2、執行專案

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