這兩天公司搭建新項目的時候發現vue-cli3有一個神奇的的東西:preset(預設)。preset其實是你在create新vue項目的時候,生成的插件配置項預設,也就是你在項目中需要用到的插件安裝成功了之后,會生成一個關於preset的文件,當你再次create新的vue項目的時候,就不需要再去選擇同樣的插件,直接用preset安裝就好了。可以參考這兩篇博客,寫的很詳細:https://www.jianshu.com/p/7f0563dbe792,https://segmentfault.com/a/1190000016389996。
這里我演示下如何生成預設並使用這個預設:
1.創建一個新的項目:vue create new-test3
紅色框起來的部分就是我之前創建項目時保存的預設,括號中是這個預設中包含的插件,移動上下鍵可以選擇一個預設安裝,如果不需要或者自己配置,選擇最后一項,按回車
2.選擇需要安裝的插件,移動上線鍵,按空格鍵切換選中之后保存,這里我選擇babel、router、vuex、css pre-processors這四個插件,按回車到下一步
3.是否按照history的方式創建路由,我選擇否,回車下一步
4.選擇css預編譯工具,我選擇less,回車下一步
5.這些組件的配置文件是放在一個package.json中還是分開放,我選第一項分開放,回車下一步
6.重點來了,重點來了,重點來了,重要的事情說三遍!
這里會問你是否需要保存預設並用到以后的項目中,我選擇yes,回車下一步
7.問你保存的preset的名字是什么,我設為testPreset,回車下一步直到安裝完成。
在你設置保存預設的時候系統會自動生成一個.vuerc的文件,一般在c盤,可以在c盤全局搜索並找到這個文件,用編輯器打開可以看到之前做的預設配置
那么再創建新項目的時候會出現上次預設的插件配置,這樣就省去了再次一個一個添加插件的煩惱,如下圖:
紅框部分為上一次預設的配置,選中回車就可以創建和test3同樣配置的項目文件。當然,你也可以對.vuerc文件中這些配置進行修改,刪除。修改之后的預設會再下一次新建項目的時候生效。可以拷貝這個文件到別的電腦,這樣在新建項目的時候也會使用同樣的預設,遠程預設還在研究,后續會加上遠程預設怎么操作。