VSCode配置啟動Vue專案
阿新 • • 發佈:2018-12-21
下載安裝並配置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代表開始執行專案,這條命令會自動在瀏覽器上執行專案,執行結果如下圖所示,代表配置成功了。