webstorm中vue語(yǔ)法的支持詳解
俗話說(shuō)，要想攻其玉，必先利其器。工作中老是在用angular開(kāi)發(fā)，但慢慢會(huì)有vue的業(yè)務(wù)，所以需要學(xué)習(xí)學(xué)習(xí)vue。今天開(kāi)始折騰vue，我是用webstorm開(kāi)發(fā)前端的，當(dāng)使用vue-cli創(chuàng)建好一個(gè)項(xiàng)目后，使用webstorm打開(kāi)簡(jiǎn)直不能入目啊，倒是沒(méi)有啥錯(cuò)誤提示，倒是一大堆的各種編輯器警告，無(wú)奈，還得去搞好IDE對(duì)vue的支持啊。
前提
vue的官方文檔上建議新手是先不要使用vue-cli，而是直接先用類(lèi)似于JQuery一樣的方式引入vue來(lái)學(xué)習(xí)。鑒于前面已經(jīng)搞過(guò)了angular的cli，所以我還是直接從cli入手。
假定我們已經(jīng)安裝好了node和npm。
全局安裝vue-cli
在終端中運(yùn)行命令：
npm install --global vue-cli
全局安裝vue-cli。然后使用vue-cli創(chuàng)建我們的項(xiàng)目：
vue init webpack my-project
這樣我們就有個(gè)完整的項(xiàng)目，并且里面會(huì)有個(gè)示例的組件，運(yùn)行：
npm run dev
然后在瀏覽器里面訪問(wèn)http://localhost:8081/就可以看到項(xiàng)目的運(yùn)行情況。
折騰webstorm
在webstorm打開(kāi)vue項(xiàng)目的時(shí)候，差點(diǎn)就想放棄vue了，實(shí)在不忍直視，但還是得發(fā)揚(yáng)一貫的探索精神啊，遇到問(wèn)題就要解決唄！
.vue類(lèi)型的文件
首先得從文件類(lèi)型上入手，在目前的版本中是沒(méi)有.vue這種文件類(lèi)型的，所以無(wú)法識(shí)別也無(wú)法高亮，就算識(shí)別了也都是亂的。查了下，有些說(shuō)是在文件類(lèi)型上加上*.vue就好了，但我加了反而更亂套了。
谷歌了半天，發(fā)現(xiàn)了這篇文章，是webstorm官方網(wǎng)站的文章https://www.jetbrains.com/help/webstorm/vue-js.html。webstorm已經(jīng)支持vue了，但是我在本地的webstorm完全沒(méi)找到這個(gè)選項(xiàng)啊，這是為啥？
看了下，發(fā)現(xiàn)webstorm的版本是2018版的，而我的webstorm是2017.2。所以我需要更新到最新版。
得，備份下webstorm的設(shè)置，然后下載最新的webstorm然后更新。順便找了個(gè)激活碼：http://hb5.s.osidea.cc:1017（熱乎的，親測(cè)可用）。
果然安裝后，發(fā)現(xiàn)了vue的標(biāo)記，的確新版的是支持的。
但是發(fā)現(xiàn).vue的文件的高亮還是沒(méi)有的。看來(lái)還是得加個(gè)文件支持（不知道是不是我前面操作的時(shí)候刪除了）：
preferences > editor > file types
拉下來(lái)選擇vue.js templates，點(diǎn)擊然后在下面的registered patterns里面點(diǎn)擊加號(hào)，然后輸入*.vue，然后點(diǎn)擊確定，點(diǎn)擊apply應(yīng)用，然后可以看到webstorm底下有個(gè)進(jìn)度條，走滿后，.vue的高亮就正常了。
unused export default
在vue的組件里面的js中有個(gè)export default，上面是灰色的提醒，鼠標(biāo)移上去后發(fā)現(xiàn)提示unused export default，這是因?yàn)闆](méi)有具體的使用這個(gè)導(dǎo)出，是JavaScript的一個(gè)語(yǔ)法提示。我們可以在IDE的configure inspection檢查配置中進(jìn)行配置。
快速的方法是：點(diǎn)擊右下角的小人頭 》 configure inspection。在彈出的界面中選擇：JavaScript 》 General。去掉選項(xiàng)：unused global symbol。然后點(diǎn)擊ok，可以看到灰色的提醒消失了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap開(kāi)關(guān)(switch)控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap開(kāi)關(guān)(switch)控件學(xué)習(xí)筆記，介紹了Bootstrap開(kāi)關(guān)(switch)控件的功能、使用說(shuō)明，感興趣的小伙伴們可以參考一下2016-05-05
前面已經(jīng)講解了 引用，函數(shù)重載，作用域和上下文，接下來(lái)，講解JavaScript中另一個(gè)重要的知識(shí)——閉包。2009-09-09
這篇文章主要介紹了淺析我對(duì)JS延遲異步腳本的思考,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了JS字典Dictionary類(lèi)定義與用法,結(jié)合實(shí)例形式分析了javascript字典Dictionary的定義、添加、移除、統(tǒng)計(jì)等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
常見(jiàn)Ajax下載文件方式以及報(bào)錯(cuò)解決辦法
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動(dòng)態(tài)和交互式網(wǎng)頁(yè)的技術(shù),它的主要優(yōu)勢(shì)在于能夠在不刷新整個(gè)網(wǎng)頁(yè)的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見(jiàn)Ajax下載文件方式以及報(bào)錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了基于Cesium繪制拋物弧線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JavaScript如何輸出楊輝三角問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了javascript解鎖前端密碼框常見(jiàn)功能做法示例演示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-03-03
這篇文章主要介紹了三種Webpack打包方式(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
javascript刪除html標(biāo)簽函數(shù)cIsHTML
這篇文章主要介紹了javascript刪除html標(biāo)簽函數(shù)cIsHTML,需要的朋友可以參考下2017-01-01