前言：

前些日子入坑了許久沒用的webstorm, 用慣了vscode突然開始用webstorm有些不習(xí)慣, 以前用的時候是剛學(xué)Javascript時候, 沒有深入的了解webstorm, 不過新版的webstorm真的很漂亮, 讓我喜歡上了（前提是自己配置一下主題、字體、顏色喲）。

最近開始用webstorm + Typescript進(jìn)行書寫代碼, 問題什么的幾乎沒有，對Typescript支持還好！不過，前兩天使用Vue + Typescript寫代碼時候遇到了問題，由于沒有用過Typescript進(jìn)行構(gòu)建Vue項目，所以寫法還是需要慢慢適應(yīng)。不過有一點好處，使用Typescript構(gòu)建項目還是很爽的，還沒有學(xué)習(xí)Ts的小伙伴趕快去官網(wǎng)去學(xué)習(xí)吧！

看了一些關(guān)于用Ts構(gòu)建Vue項目的幾篇文章，使用Ts構(gòu)建Vue項目沒有用React, Angular有優(yōu)勢，不過既然Vue官方支持使用Typescript，那么就不妨礙我們使用Ts，畢竟Ts是強類型的，有助于讓我們寫代碼時候能盡快知道哪塊代碼是錯誤的，減少運行期間的錯誤提示！

還是期待一下Vue3.0版本吧，據(jù)說尤大大使用Typescript重構(gòu)了！??！

下面就說一下在Webstorm里寫Vue文件的注意事項及配置問題(如果小伙伴喜歡用vscode的話，那么還是用vscode吧，畢竟Ts和vscode都是一個媽生的，對Ts支持簡直不要太好。只能說這是血脈。。。)

如果想在Webstorm里寫Vue項目的話要安裝一下Vue插件（畢竟我們要Vue只能提示嘛，方便我們寫代碼），點擊文件 => 設(shè)置 => Plugins => 搜索框中輸入vue即可，就列出了多個vue插件，大家可以選擇性的安裝！！

本文為了小伙伴們更好的操作，都是用圖說話，文字附加，這樣一來，就很明白了！（大家看過圖解系列書嗎？就是這樣）

正文：

我這里是使用Vue-cli3.0進(jìn)行安裝的，不會的小伙伴可以去官方文檔去查閱，很詳細(xì)！安裝好之后目錄就是這個樣子：

可以看到，vue-cli3.0和2.0的工程目錄簡潔了許多（vue.config.js是我后配置的，初始忽略），所有的大部分常用的配置這個腳手架都給你配置好了，如果需要自行配置的可以去官方文檔進(jìn)行查閱，這里就不進(jìn)行講述了。

下面步入正題（我能敲下黑板么。。。）

① 首先呢，大家都知道安裝完之后會有一些組件，比如下面的圖片所示：

就是這個樣子的，小伙伴不了解裝飾器ES7的裝飾器和Typescript的裝飾器可以去進(jìn)行查閱！下面有鏈接！！！

現(xiàn)在我先寫一個生命周期mounted鉤子：

可以看到這里是不高亮的，提示Unused method mounted. 也就是提示這個鉤子沒有使用。怎么解決呢？(我這里的是漢化版的webstorm ) 點擊文件 => 設(shè)置 => 編輯器 => Inspections => 在搜索框搜索Unused global symbol，之后把這個勾去掉就可以了！

勾去掉之后發(fā)現(xiàn)可以高亮了，不報那個提示了！如圖：

② 寫的方法函數(shù)會報Method can be static, 如圖：

怎么解決呢？同第一步的操作步驟一樣還是搜索，這回搜索Method can be static，再把勾去掉就好了。去掉勾之后如圖：

這回不提示了吧，沒有波浪線了！是不是很開心！

③ 每次都用cmd命令行啟動項目，敲命令（進(jìn)入文件夾，再啟動命令），命令代碼根據(jù)文件深度，比如我的項目目錄：

真的很麻煩，有車一族的小伙伴們說了，我車上有一鍵啟動，不用鑰匙擰就能啟動，簡直不要太方便！那有沒有一鍵啟動（傻瓜式啟動）Vue項目呢？

當(dāng)然有，webstorm支持這個功能，是不是心情澎湃了呢！下面看圖：

第一步，找到這個打開編輯運行/調(diào)試配置對話框（圈圈的就是了）（找的時候一定往右上瞅），如圖：

然后點擊一下，出現(xiàn)配置彈窗：

然后呢，點擊左上角的加號（+），創(chuàng)建一個配置，如圖：

這時，我們在左側(cè)欄中找到npm，點擊一下，如圖：

注意，我這里配置過了！

在第一個選項中package.json地址第一次是空的，要選擇一下，點擊一下下拉框就會自動提示你項目中的package.json文件的路徑了，然后Script選項要填你開發(fā)模式下的命令，我這里是Vue官方默認(rèn)的啟動命令npm run serve，如果小伙伴使用了像npm run dev之類的命令，Scripts選項要寫上dev，Command就是run，然后就可以應(yīng)用 => 確定，這時“打開編輯運行/調(diào)試配置對話框“就變成了SERVE，如圖：

然后呢，小伙伴按Alt + F12組合鍵，調(diào)出控制臺，如圖：

這時我要啟動項目只需點擊一個按鈕即可，在哪里呢？還是看圖吧：

就是紅線上面的三角形，此時我點一下，就啟動了Vue項目了，如圖：

可以看到項目已經(jīng)啟動成功了，然后我們復(fù)制一下網(wǎng)址，在瀏覽器上粘貼就出現(xiàn)項目了！

要不要這么爽，轎車有一鍵啟動，咱們項目也有一鍵啟動！?。?/p>

如果想重新啟動項目的話，還是在三星形的位置（此時是一個刷新圖標(biāo)）點一下就可以重啟項目了！??！

下面附一下ES7的裝飾器和Typescript裝飾器（中文版）的鏈接，英語好的可以去看英文文檔，這兩個裝飾器其實都差不多的：

Typescript裝飾器

www./docs/handbo…

ES7裝飾器

segmentfault.com/p/121000000…

建議大家在看這個裝飾器之前，要了解一下裝飾者模式！這樣的話呢，理解起來會很容易的！