前言
使用vue這個框架已經陸陸續續做了好幾個項目了,不知不覺也已經在公司呆了4個月,轉正了。時間如水。。。(省略一萬字)。/咳~不瞎扯了,公司是直接用的官方腳手架生成項目,官方模版沒有vuex,axios這些支持,模版也是最原始的模版,所以每次初始化項目都要做一堆配置,非常麻煩。所以就想着自己定制一套。
非常幸運,vue友好的支持我們自己的模版倉庫,這樣可以節省不少抄作業的過程。開始動手學習吧。
fork一份自己喜歡的模版 ——以webpack為例
vue有一個官方模版組織 傳送門:vue官方模版
這些官方模版都是可以fork自行改造的。fork到自己倉庫后 ,我們就可以通過
vue init username/repo my-project
來生成自己模版,這里有個小坑,倉庫不要忘了加分支,比如
vue init xu455255849/vue-xu#devlop my-project
不然你永遠都是直接init master分支,而無法生成自己模版。po主也是被同事點醒~😢
自定義配置插件
文件目錄有個 meta.js文件,其中有個prompts參數,可以定義用戶輸入,我們可以在這個地方添加或者刪除一些配置。
這樣我們就可以獲取用戶對是否安裝插件的選擇,根據用戶的選擇我們可以判斷是否生成該文件。
根據用戶選擇渲染文件(啟用插件)
根據用戶的選擇,我們要判斷是否渲染文件以及安裝一些一些依賴。
不同的插件,可能方式是不一樣的,所以需要根據插件引入方式編寫渲染邏輯。
定制自己的模版風格
上面講了一些插件的自定義,接下來在談談po主的一些模版風格給大家參考參考,當然,自己喜歡就好。
后記
上面po主提的還都是些比較大眾的,基本的配置,這些配置其實還可以細化,比如 提供多個css預處理工具選擇,less,sass,stylus,可以隨意切換,根據項目類型渲染模版,定制不同類型的模版,都可以在開發中節約大量時間。有個模版~復制代碼都舒服多了😄~~
如果覺得本文對你有所幫助,就star一下吧~大傳送之術! 我的博客Github
po主目前還在開發一個npm工具,配套模版使用,大致功能就是通過命令直接生成頁面 ,組件等文件,倉庫已經就緒,下篇文章會寫這個npm插件相關開發過程~
new一個文件。。。創建 html,,,css,,,js,,又要復制一些基本的代碼進來。。麻煩死了~