使用VSCode配置簡單的vue專案
由於最近要使用的專案框架為前後端分離的，採用的是vue.js+webAPI的形式進行開發的。因為之前我沒有接觸過vue.js，也只是通過視訊文件做了一些簡單的練習。今天技術主管說讓大家熟悉下VSCode開發vue，所以自己摸索了好久，才算是把簡單的專案配置成功了。後續還得自己多瞭解這方面的知識。想著怕時間長了自己會忘記，所以寫下來也供有需要的人一起學習。
一.配置環境
1.1 下載VSCode,官網直接下載就行。
1.2 漢化VSCode
Ctrl+Shift+P 輸入 "configure display language" 然後點選確定後，修改locale.json檔案下的屬性"locale"為"zh-CN". 重啟VSCode工具
con
若重啟後VSCode仍為英文版，在商店中搜索 Chinese 安裝中文外掛，再重新啟動VSCode即可.
1.3 安裝vue外掛vetur，實現支援vue檔案的程式碼高亮
安裝外掛：ctrl+Shift+X 在商店中查詢 vetur 或者 Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可
然後在檔案->首選項->設定 找到使用者設定，點開 userSettings 新增如下的設定
"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"
}
1.4安裝ESLint 外掛
安裝外掛：ctrl+Shift+X 在商店中查詢 eslint或者 Ctrl + P 然後輸入 ext install eslint然後回車點安裝即可
同樣的需要在配置檔案中新增如下設定資訊：
"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"] },
最終的配置資訊如下所示：
二.建立一個vue專案
2.1使用快捷鍵 Ctrl+~開啟終端，輸入命令列 vue init webpack yourProjectName ,其中yourProjectName為你的專案名稱，這裡我建立的是helloworld.
接下來根據提示進行操作
安裝完畢後 執行 npm run dev 會出現訪問地址：http://localhost:8080
在安裝過程中可能會出現 ‘webpack-dev-server’不是內部或外部指令的錯誤 這是因為在上一步的操作中，我們選擇了NO，自己手動注入依賴檔案，在後續的npm install 命令後，專案檔案內會生成node_modules資料夾，網上有說是重新刪除資料夾，然後在專案根目錄重新執行終端，輸入npm install ,npm run bulid 最後輸入 npm run dev 就可成功運行了。但是我試了很多次還是不行。最後又重新新建了專案在是否註冊依賴時，選擇了 Yes 然後就成功運行了。
最後的效果圖是這樣的。
至此，一個簡單的vue專案就搭建好了。
說實話，自己是第一次接觸vue.js 之前一直在接觸後端C#，也希望通過專案自己能夠掌握的更牢固，以便後續的學習和成長。加油。