這次帶給大家webstorm中vue使用案例詳解，webstorm中vue使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
前提
vue的官方文件上建議新手是先不要使用vue-cli，而是直接先用類似JQuery一樣的方式引入vue來學習。鑑於前面已經搞過了angular的cli，所以我還是直接從cli開始。
假定我們已經安裝好了node和npm。
全域安裝vue-cli
在終端機中執行指令：
npm install --global vue-cli
全域安裝vue-cli。然後使用vue-cli創建我們的項目：
vue init webpack my-project
這樣我們就有一個完整的項目，並且裡面會有一個示例的組件，運行：
npm run dev
然後在瀏覽器裡面訪問http://localhost:8081/就可以看到專案的運作情況。
折騰webstorm
在webstorm打開vue專案的時候，差點就想放棄vue了，實在不忍直視，但還是得發揚一貫的探索精神啊，遇到問題就要解決嗆！
.vue類型的檔案
首先得從檔案類型上入手，在目前的版本中是沒有.vue這種檔案類型的，所以無法辨識也無法高亮，就算辨識了也都是亂的。查了一下，有些說是在文件類型上加上*.vue就好了，但我加了反而更亂套了。
Google了半天，發現了這篇文章，是webstorm官方網站的文章https://#www.jetbrains.com/help/webstorm/vue-js.html。 webstorm已經支援vue了，但我在本地的webstorm完全沒找到這個選項啊，這是為啥？
看了下，發現webstorm的版本是2018版的，而我的webstorm是2017.2。所以我需要更新到最新版。
得，備份下webstorm的設置，然後下載最新的webstorm然後更新。順便找了個啟動碼：http://hb5.s.osidea.cc:1017（熱乎的，親測可用）。
果然安裝後，發現了vue的標記，的確新版的是支援的。
但是發現.vue的檔案的高亮還是沒有的。看來還是得加個檔案支援（我不知道是不是我前面操作的時候刪除了）：
preferences > editor > file types
拉下來選擇vue.js templates，點擊然後在下面的registered patterns裡面點擊加號，然後輸入*.vue，然後點擊確定，點擊apply應用，然後可以看到webstorm底下有個進度條，走滿後，.vue的高亮就正常了。
unused export default
在vue的元件裡面的js中有個export default，上面是灰色的提醒，滑鼠移上去後發現提示unused export default，這是因為沒有具體的使用這個匯出，是JavaScript的一個語法提示。我們可以在IDE的configure inspection檢查配置中進行設定。
快速的方法是：點選右下角的小人頭 》 configure inspection。在彈出的介面中選擇：JavaScript 》 General。去掉選項：unused global symbol。然後點選ok，可以看到灰色的提醒消失了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是webstorm中vue使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
