一、WebStorm支援Vue

1、安裝vue外掛
（1）File --> Settings --> Plugins ，點選Browse repositories，在瀏覽儲存庫中搜索：

（2）搜尋vue，點選 Install 進行安裝，安裝之後點選 Restart WebStorm 重啟：


2、 新增vue模板
（1）File --> Settings --> Editor --> File and Code Templates，選擇 VUE File ，右測編輯預設模板內容：

如果 Files 下沒有vue file選項，需自己手動新增：

二、WebStorm支援es6

不支援es6如下，會有很多標記的紅線，簡單的配置一下即可：

（1）File --> Settings --> Language & Frameworks–> JavaScript，選擇 ECMAScript 6：

點選“OK”即可。
（2）由於es6支援情況，所以還需要將編寫的es6轉化問es5，使用es6更多的是方便編寫。

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

npm install babel -g 

安裝成功之後開始配置，File --> Settings --> Tools --> File Watcher，新增配置Babel：

“OK”應用即可。也可如下直接點選 Add watcher 進行配置：

三、vue支援less

（1）安裝 less 和 less-loader ，在專案目錄下執行如下命令：

npm install less less-loader --save-dev

（2）安裝成功後，開啟webpack.base.conf.js ，在 module.rules 後面新增一段：

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
}

（3） style 標籤中 加上 lang=“less” 屬性即可：

<style scoped lang="less">
	
</style>

三、vue支援iconfont圖示庫

（1）方法一：外鏈
在 iconFont 官網 選擇自己需要的圖示 --> 新增購物車

為了方便可以給專案起一個名字。找到對應的專案，選擇Font class

點選“檢視線上連結” --> “暫無程式碼，點此生成” --> “複製連結”

在我們的vue專案中，找到index.html檔案，引入css樣式，放上你的連結地址:

<link rel="stylesheet" href="//at.alicdn.com/t/font_968920_gx91la4h4w.css">

接下來就可以在任何元件使用圖示：

<i class="iconfont icon-qian"></i>
<i class="iconfont icon-geren"></i>
<i class="iconfont icon-duoyuyan"></i>

就這麼簡單！
（2）方法二：本地檔案
為了提高使用者體驗，防止使用者在沒網的情況下顯示空白，建議使用本地檔案。
接著上面的步驟，不在index.html檔案引入樣式，首先下載至本地：

在vue專案中建立字型資料夾（如：iconfont），把我們下載好的檔案 iconfont.css 和 iconfont.ttf放到該資料夾下，檢查iconfont.css src引入的字型路徑是否正確。

在main.js中引入iconfont.css樣式

import './assets/iconfont/iconfont.css' //檔案路徑

具體的使用和方法一一樣：

<i class="iconfont icon-qian"></i>
<i class="iconfont icon-geren"></i>
<i class="iconfont icon-duoyuyan"></i>