webstorm中vue使用案例詳解

這次帶給大家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中文網其它相關文章！

推薦閱讀：

JS取得url參數並發送json格式POST步驟詳解

JS刷新頁面方法總結

以上是webstorm中vue使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！