webstorm 檔案 -> new -> project

1、儘量不要勾選 Use the default project setup (babel,eslint) 預設建立的專案好多的配置不全，後期再裝很麻煩。

2、點選 create 後出現以下選項，按鍵盤上下鍵選擇預設（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0預設使用yarn下載），這裡我選擇手動

3、選擇配置，這時你會看見一些選項，你要整合什麼就選就行了，我這裡選個我比較常用的（注：空格鍵是選中與取消，A鍵是全選），這裡有些選項可能看不見，移動上下鍵也不行，需要將選項邊框網上拉才可以顯示全。

4、選擇合適的 vue.js 版本開始這個專案，這裡我選 3.x

5、是否使用babel做轉義 yes

6、是否使用class風格的元件語法 yes

7、是否使用history模式

8、選擇預處理的模式 這裡我選 dart-sass ，與 node-sass 區別

• node-sass 是用 node(呼叫 cpp 編寫的 libsass)來編譯 sass；
  dart-sass 是用 drat VM 來編譯 sass；node-sass是自動編譯實時的，dart-sass需要儲存後才會生效
• 推薦 dart-sass 效能更好（也是 sass 官方使用的），而且 node-sass 因為國情問題經常裝不上
  

9、Pick a linter / formatter config: (Use arrow keys)：選擇語法檢測規範 這裡我選擇 ESLint +Prettier

10、儲存就檢測 和 fix和commit時候檢查 這裡我選擇第一個

11、放獨立資料夾 與 放 package.json 。這裡看自己喜歡哪個，這裡我選的是 放獨立資料夾

12、是否記錄一下以便下次繼續使用這套配置 .鍵入N不記錄，如果鍵入Y需要輸入儲存名字

13、靜靜等待完成即可，如果時間比較長的話你可以去睡一覺。直到頁面出現 Done 你就可以起來搬磚了。

到此這篇關於webstorm建立vue-cli腳手架的傻瓜式教程的文章就介紹到這了,更多相關webstorm建立vue-cli腳手架內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！