[TOC] # PSD自動切圖 psd2vuep提供psd文件直接轉換為vuep組件和resource的功能 ## 準備工作 1. 整理psd文件 每一個單page對應一個psd文件，如`p1.psd`,`p2.psd`.... 2. 整理psd文件中的分層 如果有需求可以對分層文件進行命名，如action_btn，默認會對圖層進行自動命名，格式為layer_(遞增數字) 3. psd文件中可以存在分組，目前最多只能有一層。 4. 不需要的圖層可以隱藏，隱藏的圖層會被過濾。 5. 圖層可以通過queryString的方式設置特殊處理，如設置為背景、使用bottom對齊等等，全部可用的特殊處理方法參考圖層magic 6. 圖層不能有濾鏡效果，html無法尺寸濾鏡效果。如果背景超出畫布尺寸，可以進行適當裁剪。 7. 自動切圖可以處理圖片圖層，文字圖層，未柵格化的圖層，圖層分組。其他帶有特效或者遮罩、蒙版、樣式的圖層請預先合并為普通圖層。 例子：  導出結果： ```html <Page name="p1start" :enter="enterEffect" :leave="leaveEffect" @swipeUp="nextPage('p2rule')" bg="bg"> <Grouper layer="bottoms"> <Imager layer="shadow"></Imager> <Imager layer="layer_9"></Imager> <Imager layer="startbtn"></Imager> </Grouper> <Grouper layer="logos"> <Imager layer="layer_8"></Imager> <Imager layer="layer_7"></Imager> <Imager layer="layer_6"></Imager> </Grouper> <Grouper layer="loves"> <Imager layer="wahts"></Imager> <Imager layer="booom"></Imager> <Imager layer="players"></Imager> <Imager layer="point"></Imager> <Imager layer="layer_5"></Imager> <Imager layer="layer_4"></Imager> <Imager layer="layer_3"></Imager> <Imager layer="layer_2"></Imager> <Imager layer="layer_1"></Imager> <Imager layer="layer"></Imager> <Imager layer="usera"></Imager> <Imager layer="iloveyou"></Imager> </Grouper> <Grouper layer="tops"> <Imager layer="rulebtn"></Imager> <Imager layer="fly"></Imager> <Imager layer="logo"></Imager> </Grouper> </Page> ``` ## 圖層Magic 可以給圖層添加magic。以支持圖層導出的定制化，magic的添加格式為 `圖層名稱?magic=值`，如`btn?mode=bottom` **支持的magic 列表** - `center` 提供對齊功能，可選值[x,y,xy]. 如`btn?center=x` - `mode` 提供布局的一些模式，可選值[bottom],如`btn?mode=bottom` - `bg` 提供背景設置功能，一個psd只能設置一個背景，默認以當前圖層作為背景，如果背景是純色，可以設置背景色值，如`bg?bg`，或者 `bg?bg=#ff0000` > 注：背景可以串聯，比如按鈕居下居中對齊，可以設置為`btn?mode=bottom&center=x` ## 開始自動切圖 ```bash Usage: psd2vuep [options] Options: -h, --help output usage information -V, --version output the version number -s, --src <path> 添加psd所在目錄，默認為當前目錄下的psd文件夾 -o, --out <path> 輸出文件夾路徑，默認為當前目錄下的dist文件夾 -p, --prefix <value> 圖層命名前綴，在修改頁面時很有用處 -t, --template <value> 選擇使用的模板名稱 -u, --usename <value> 是否使用圖層名稱做為圖片名 -b, --base64 [path] 將小于15kb的文件使用base64進行編碼 ``` 將psd文件下的pages切圖到dist目錄下： `psd2vuep -s ./psd -o ./dist` ## 上線前的優化 ## 1.對于小圖片（目前為<= 15kb），提供自動合成base64的功能，在項目目錄下執行：`psd2vuep -b`可以在assets目錄下生成`vuep-base64-config.js`文件，在頁面的`app.js`之前引入即可。 2.對于特別大的png背景圖片可以考慮轉換為jpeg格式進行二次壓縮。