由于最近要使用的項(xiàng)目框架為前后端分離的霎苗，采用的是vue.js+webAPI的形式進(jìn)行開發(fā)的。因?yàn)橹拔覜]有接觸過vue.js榛做，也只是通過視頻文檔做了一些簡單的練習(xí)唁盏。今天技術(shù)主管說讓大家熟悉下VSCode開發(fā)vue，所以自己摸索了好久检眯，才算是把簡單的項(xiàng)目配置成功了厘擂。后續(xù)還得自己多了解這方面的知識(shí)。想著怕時(shí)間長了自己會(huì)忘記锰瘸，所以寫下來也供有需要的人一起學(xué)習(xí)刽严。
一.配置環(huán)境
1.1?下載VSCode,官網(wǎng)直接下載就行。
1.2?漢化VSCode
Ctrl+Shift+P?輸入 "configure display language"?然后點(diǎn)擊確定后避凝，修改locale.json文件下的屬性"locale"為"zh-CN".?重啟VSCode工具
若重啟后VSCode仍為英文版舞萄，在商店中搜索?Chinese?安裝中文插件眨补，再重新啟動(dòng)VSCode即可.
1.3 安裝vue插件vetur，實(shí)現(xiàn)支持vue文件的代碼高亮
安裝插件：ctrl+Shift+X?在商店中查找?vetur?或者??Ctrl + P?然后輸入?ext install vetur?然后回車點(diǎn)安裝即可?
然后在文件->首選項(xiàng)->設(shè)置?找到用戶設(shè)置倒脓，點(diǎn)開?userSettings?添加如下的設(shè)置
"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"
}
1.4安裝ESLint?插件
安裝插件：ctrl+Shift+X?在商店中查找?eslint或者??Ctrl + P?然后輸入?ext install eslint然后回車點(diǎn)安裝即可?
同樣的需要在配置文件中添加如下設(shè)置信息：
"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]
? ? },
最終的配置信息如下所示：
二.創(chuàng)建一個(gè)vue項(xiàng)目
2.1使用快捷鍵?Ctrl+~打開終端撑螺，輸入命令行 vue?init webpack yourProjectName ,其中yourProjectName為你的項(xiàng)目名稱，這里我創(chuàng)建的是helloworld.
接下來根據(jù)提示進(jìn)行操作
安裝完畢后?運(yùn)行?npm run dev?會(huì)出現(xiàn)訪問地址：http://localhost:8080
在安裝過程中可能會(huì)出現(xiàn) ‘webpack-dev-server’不是內(nèi)部或外部指令的錯(cuò)誤?這是因?yàn)樵谏弦徊降牟僮髦衅槠覀冞x擇了NO甘晤，自己手動(dòng)注入依賴文件，在后續(xù)的npm install?命令后吊履，項(xiàng)目文件內(nèi)會(huì)生成node_modules文件夾安皱，網(wǎng)上有說是重新刪除文件夾调鬓，然后在項(xiàng)目根目錄重新運(yùn)行終端艇炎，輸入npm install ,npm run bulid? 最后輸入 npm run dev?就可成功運(yùn)行了。但是我試了很多次還是不行腾窝。最后又重新新建了項(xiàng)目在是否注冊(cè)依賴時(shí)缀踪，選擇了?Yes?然后就成功運(yùn)行了。
最后的效果圖是這樣的驴娃。
至此循集，一個(gè)簡單的vue項(xiàng)目就搭建好了。
說實(shí)話咒彤，自己是第一次接觸vue.js?之前一直在接觸后端C#疆柔，也希望通過項(xiàng)目自己能夠掌握的更牢固，以便后續(xù)的學(xué)習(xí)和成長镶柱。加油。
