前些日子入坑了許久沒用的webstorm, 用慣了vscode突然開始用webstorm有些不習(xí)慣, 以前用的時(shí)候是剛學(xué)Javascript時(shí)候, 沒有深入的了解webstorm, 不過新版的webstorm真的很漂亮, 讓我喜歡上了（前提是自己配置一下主題、字體、顏色喲）。
最近開始用webstorm + Typescript進(jìn)行書寫代碼, 問題什么的幾乎沒有，對(duì)Typescript支持還好！不過，前兩天使用Vue + Typescript寫代碼時(shí)候遇到了問題，由于沒有用過Typescript進(jìn)行構(gòu)建Vue項(xiàng)目，所以寫法還是需要慢慢適應(yīng)。不過有一點(diǎn)好處，使用Typescript構(gòu)建項(xiàng)目還是很爽的，還沒有學(xué)習(xí)Ts的小伙伴趕快去官網(wǎng)去學(xué)習(xí)吧！
看了一些關(guān)于用Ts構(gòu)建Vue項(xiàng)目的幾篇文章，使用Ts構(gòu)建Vue項(xiàng)目沒有用React, Angular有優(yōu)勢(shì)，不過既然Vue官方支持使用Typescript，那么就不妨礙我們使用Ts，畢竟Ts是強(qiáng)類型的，有助于讓我們寫代碼時(shí)候能盡快知道哪塊代碼是錯(cuò)誤的，減少運(yùn)行期間的錯(cuò)誤提示！
還是期待一下Vue3.0版本吧，據(jù)說尤大大使用Typescript重構(gòu)了！??！
下面就說一下在Webstorm里寫Vue文件的注意事項(xiàng)及配置問題(如果小伙伴喜歡用vscode的話，那么還是用vscode吧，畢竟Ts和vscode都是一個(gè)媽生的，對(duì)Ts支持簡(jiǎn)直不要太好。只能說這是血脈。。。)
如果想在Webstorm里寫Vue項(xiàng)目的話要安裝一下Vue插件（畢竟我們要Vue只能提示嘛，方便我們寫代碼），點(diǎn)擊文件 => 設(shè)置 => Plugins => 搜索框中輸入vue即可，就列出了多個(gè)vue插件，大家可以選擇性的安裝！！
本文為了小伙伴們更好的操作，都是用圖說話，文字附加，這樣一來，就很明白了?。ù蠹铱催^圖解系列書嗎？就是這樣）
我這里是使用Vue-cli3.0進(jìn)行安裝的，不會(huì)的小伙伴可以去官方文檔去查閱，很詳細(xì)！安裝好之后目錄就是這個(gè)樣子：
可以看到，vue-cli3.0和2.0的工程目錄簡(jiǎn)潔了許多（vue.config.js是我后配置的，初始忽略），所有的大部分常用的配置這個(gè)腳手架都給你配置好了，如果需要自行配置的可以去官方文檔進(jìn)行查閱，這里就不進(jìn)行講述了。
下面步入正題（我能敲下黑板么。。。）
① 首先呢，大家都知道安裝完之后會(huì)有一些組件，比如下面的圖片所示：
就是這個(gè)樣子的，小伙伴不了解裝飾器ES7的裝飾器和Typescript的裝飾器可以去進(jìn)行查閱！下面有鏈接！??！
現(xiàn)在我先寫一個(gè)生命周期mounted鉤子：
可以看到這里是不高亮的，提示Unused method mounted. 也就是提示這個(gè)鉤子沒有使用。怎么解決呢？(我這里的是漢化版的webstorm ) 點(diǎn)擊文件 => 設(shè)置 => 編輯器 => Inspections => 在搜索框搜索Unused global symbol，之后把這個(gè)勾去掉就可以了！
勾去掉之后發(fā)現(xiàn)可以高亮了，不報(bào)那個(gè)提示了！如圖：
② 寫的方法函數(shù)會(huì)報(bào)Method can be static, 如圖：
怎么解決呢？同第一步的操作步驟一樣還是搜索，這回搜索Method can be static，再把勾去掉就好了。去掉勾之后如圖：
這回不提示了吧，沒有波浪線了！是不是很開心！
③ 每次都用cmd命令行啟動(dòng)項(xiàng)目，敲命令（進(jìn)入文件夾，再啟動(dòng)命令），命令代碼根據(jù)文件深度，比如我的項(xiàng)目目錄：
真的很麻煩，有車一族的小伙伴們說了，我車上有一鍵啟動(dòng)，不用鑰匙擰就能啟動(dòng)，簡(jiǎn)直不要太方便！那有沒有一鍵啟動(dòng)（傻瓜式啟動(dòng)）Vue項(xiàng)目呢？
當(dāng)然有，webstorm支持這個(gè)功能，是不是心情澎湃了呢！下面看圖：
第一步，找到這個(gè)打開編輯運(yùn)行/調(diào)試配置對(duì)話框（圈圈的就是了）（找的時(shí)候一定往右上瞅），如圖：
然后點(diǎn)擊一下，出現(xiàn)配置彈窗：
然后呢，點(diǎn)擊左上角的加號(hào)（+），創(chuàng)建一個(gè)配置，如圖：
這時(shí)，我們?cè)谧髠?cè)欄中找到npm，點(diǎn)擊一下，如圖：
注意，我這里配置過了！
在第一個(gè)選項(xiàng)中package.json地址第一次是空的，要選擇一下，點(diǎn)擊一下下拉框就會(huì)自動(dòng)提示你項(xiàng)目中的package.json文件的路徑了，然后Script選項(xiàng)要填你開發(fā)模式下的命令，我這里是Vue官方默認(rèn)的啟動(dòng)命令npm run serve，如果小伙伴使用了像npm run dev之類的命令，Scripts選項(xiàng)要寫上dev，Command就是run，然后就可以應(yīng)用 => 確定，這時(shí)“打開編輯運(yùn)行/調(diào)試配置對(duì)話框“就變成了SERVE，如圖：
然后呢，小伙伴按Alt + F12組合鍵，調(diào)出控制臺(tái)，如圖：
這時(shí)我要啟動(dòng)項(xiàng)目只需點(diǎn)擊一個(gè)按鈕即可，在哪里呢？還是看圖吧：
就是紅線上面的三角形，此時(shí)我點(diǎn)一下，就啟動(dòng)了Vue項(xiàng)目了，如圖：
可以看到項(xiàng)目已經(jīng)啟動(dòng)成功了，然后我們復(fù)制一下網(wǎng)址，在瀏覽器上粘貼就出現(xiàn)項(xiàng)目了！
要不要這么爽，轎車有一鍵啟動(dòng)，咱們項(xiàng)目也有一鍵啟動(dòng)！??！
如果想重新啟動(dòng)項(xiàng)目的話，還是在三星形的位置（此時(shí)是一個(gè)刷新圖標(biāo)）點(diǎn)一下就可以重啟項(xiàng)目了?。?！
下面附一下ES7的裝飾器和Typescript裝飾器（中文版）的鏈接，英語(yǔ)好的可以去看英文文檔，這兩個(gè)裝飾器其實(shí)都差不多的：
Typescript裝飾器
ES7裝飾器
建議大家在看這個(gè)裝飾器之前，要了解一下裝飾者模式！這樣的話呢，理解起來會(huì)很容易的！
聯(lián)系客服
