由於最近要使用的項目框架為前后端分離的，采用的是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工具
若重啟后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#，也希望通過項目自己能夠掌握的更牢固，以便后續的學習和成長。加油。