依賴安裝說明 ~~~ --save: 將依賴安裝到 dependencies --save-dev: 將依賴安裝到 devDependencies 在開發環境下，兩者內所有依賴都會被下載，在生產環境下只會下載 dependencies 下依賴 ~~~ vue-cli 腳手架使用 ~~~ vue create test-project ~~~ ## ui框架默認樣式修改 說明：當前 ui 框架（像 iview、element） css 使用單位均為 px ，在很多時候需要重寫樣式將 px 轉換為 rem 達到適配大多電腦屏幕分辨率。現使用 `postcss-pxtorem` 可將 ui 框架樣式單位選擇性替換為 rem ### 1. 安裝依賴 ~~~ // 包管理選擇的是 yarn，當然也可以使用 npm ，全憑個人喜好 yarn add postcss-pxtorem --dev ~~~ ### 2. 配置 在 package.json 文件內添加 ~~~ "postcss": { "plugins": { "postcss-pxtorem": { "rootValue": 16, "unitPrecision": 5, "propList": ["*"], "selectorBlackList": [], "replace": true, "mediaQuery": false, "minPixelValue":?0 } } } ~~~ 額外小知識點： ~~~ 1rem = ?px // rem 為相對于根元素的字體大小的單位 // 若設置 html { font-size: 14px } ，那么 1rem = 14px // 未設置的話，現在 pc 端瀏覽器默認為 16px 即 1rem = 16px ~~~ 配置說明： ~~~ rootValue： 根元素字體大小，默認值16px，可理解為1rem = 16px unitPrecision：px 轉 rem 小數保留位數，默認可保留 5 位 propList：選擇哪些屬性單位被轉換為 rem，默認值 ['font', 'font-size', 'line-height', 'letter-spacing']，這里設置 '*' 表示所有屬性單位轉換 selectorBlackList：選擇忽略轉換為 px 的 class 名稱，默認值 []，['ivu', 'ele'] 表示 `.ivu-...`、`.ele-...`的所有 class 名稱忽略轉換 replace：(Boolean) replaces rules containing rems instead of adding fallbacks. mediaQuery：允許px轉換媒體查詢 minPixelValue：最小轉換像素值設置 ~~~