A. webstorm 什麼版本支持vue
在安裝Vue插件之前，首先需要打開WebStorm的設置界面。具體步驟如下：點擊菜單欄中的「File」，然後選擇「Settings」，進入插件設置頁面。在插件頁面的左側輸入框中，無需輸入任何內容，直接點擊頁面上方的搜索按鈕，系統會自動列出所有插件。在搜索結果中，找到「Vue.js」插件，將其選中，右側的安裝框會顯示綠色的「Install」字樣，點擊該按鈕進行安裝。
安裝完成後，可以新建文件時看到相關的Vue文件提示。接下來，可以根據需要設置Vue文件的模板。打開WebStorm的設置界面，依次選擇「File」、「Settings」、「Editor」、「File and Code Templates」。在彈出的對話框中，選擇「Vue File」，進入模板編輯頁面。在這里，可以根據自己的需求編輯默認模板內容，以滿足項目開發的具體需求。
設置完成後，每次新建Vue文件時，WebStorm都會按照所設定的模板生成文件。這不僅節省了手動輸入模板代碼的時間，還能確保代碼風格的一致性。需要注意的是，設置Vue模板時，可以添加一些常用的代碼片段，如引入必要的庫、設置全局變數等，以便快速構建項目。
通過上述步驟，可以輕松地在WebStorm中安裝和配置Vue插件，從而提高開發效率，更好地支持Vue項目開發。在實際開發過程中，還可以根據項目需求進一步調整模板內容，以適應不同的開發場景。
B. 如何在WebStorm 2017下調試Vue.js + webpack
在WebStorm 2017中調試Vue.js + webpack項目，需要掌握一些基本的配置和調試技巧。
首先，了解webpack配置中的devtool選項至關重要。設置devtool為『#source-map』可以生成.map文件，在Chrome瀏覽器中調試時可顯示源代碼。配置如下：devtool: '#source-map'
實際上，webpack提供了7個配置項供選擇，官方默認的是『#cheap-mole-eval-source-map』。設置好後，代碼中標注了debugger的地方，就能看到對應的代碼了，非常方便。
在Chrome中，可以通過快捷鍵command+p輸入文件名找到對應的源代碼。設置斷點時需注意，這里斷點會打在下一行，且一行代碼需運行到下一行才算執行。
推薦使用vue家的項目腳手架vue-cli。安裝命令：npm install -g vue-cli，然後創建新項目：vue init webpack my-project，一路回車即可。
從網上下載一個帶webpack的Vue項目，運行前記得執行npm install。項目構建文件夾中，webpack.dev.conf用於開發模式，webpack.prod.conf用於生產模式，開發模式提供了#cheap-mole-eval-source-map，生產模式根據config文件夾下的proctionSourceMap變數控制是否使用，若為true，則devtool為#source-map，其他使用方法一致。
線上調試時，使用webpack熱載入可以省去掛載調試步驟，非常方便。發布後部署到伺服器上，仍可使用熱載入。熱載入原理涉及webpack熱載入伺服器推送事件__webpack_hmr，eventsource類型，建立一個不會停止的stream流鏈接，伺服器發送更新數據回來append到流的末端，前端讀取最新append的數據，然後動態更新頁面。
熱更新過程包括監聽伺服器上的數據，有修改時伺服器發送數據過來，前端把數據拿來後替換到頁面上。
推薦使用fiddler的AutoResponder功能，它可以將一個地址指向另一個地址，匹配正則，非常方便。