本篇文章主要是針對上篇部落格vue專案構建中構建的專案在webstorm中的一些ES6語法支援以及vue高亮和語法支援。

webstorm中ES6語法配置

當我們用webstorm開啟我們所構建的elma專案中的main.js檔案的時候，發現有標紅的紅線，原因是webstorm不支援es6語法，需要配置一下。

配置方法：
開啟file–>setting,做如下操作

如果想實現es6直接轉化為es5，那麼babel是個好選擇。

Babel是一個廣泛使用的ES6轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在瀏覽器或其他環境執行。這意味著，你可以用ES6的方式編寫程式，又不用擔心現有環境是否支援。
而且你還希望每次修改程式碼時能自動轉碼，所以還要用到webstorm的file watcher（當然還有其他解決方案）
首先要安裝babel，同樣也是使用npm安裝

npm install -g babel

配置方式 file-settings File watcher

其中Program： 中填寫的是babel的安裝路徑，其他的預設就好啦。這樣就能實現ES6的語法支援以及ES6自動轉換為ES5。 好了，開啟第二個話題。

webstorm支援vuejs檔案

當我們開啟App.vue檔案的時候，發現黑白分明啊，這說明此刻的webstorm並不支援vuejs檔案，怎麼辦呢？還能說啥，配置唄！

1. webstorm安裝vue外掛
   當我們file —》 settings的時候，找到plugin是，在搜尋框中輸入vue 發現並沒有vue外掛，如圖，點選圖中的連結下載即可。
   
   
   2.安裝vue，重新啟動webstorm，再次開啟App.vue檔案。
   
   發現webstorm已經對vue檔案有高亮顯示啦。
   

設定webstorm的vue新建檔案模板

僅僅支援vue檔案還不行，還需要當我們新建.vue檔案的時候，能夠創建出vue的檔案，怎麼做呢？
方法：file–》settings —>file and code templates,在右側找到vue點選，最右邊設定 vue file 副檔名vue，如圖：

這樣在新建檔案的時候就出現vue檔案。

好啦，用webstorm開發vue的配置已經設定好了，可以愉快的敲程式碼啦。