vue 學習筆記 cube-ui

vue-cli3 使用cube-ui 只須要 vue add cube-ui 下載便可，不須要本身進行配置
參考地址：didi.github.io/cube-ui/#/z…
cube-ui
下載選項：
1.

什麼是後編譯：
後編譯的思想是不會在包發佈的時候進行編譯，而是會在使用這個包的前端項目構建的時候進行編譯。
後編譯是 cube-ui 的一個重要的生態，藉助於後編譯，整個的 web 應用的開發均可以直接基於 ES2015+ 進行開發，而項目依賴的一些 NPM 包也是能夠直接使用 ES2015+ 進行開發

做者：ustbhuangyi 連接：www.imooc.com/article/258… 來源：慕課網 本文原創發佈於慕課網 ，轉載請註明出處，謝謝合做

css: {  //這個是使用下載好的代碼
    loaderOptions: {
      stylus: {
        'resolve url': true,   //這樣在引入時就能夠引入到編譯後的代碼
        'import': [
          './src/theme'
        ]
      }
    }
    
    
module.exports = {
  // ...
  resolve: {
    alias: {
      // ...
      "cube-ui": "cube-ui/lib"
    }
  }
  // ...
}

複製代碼

引入文件：

//在package.json 中的這段配置來解析cube-ui的引入路徑。
//在組件中能夠經過 import {cube-ui中的組件名} from 'cube-ui' 進行cube-ui中組件的引入
"transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  }
複製代碼

優勢：後編譯的優勢是能對依賴包中的代碼進行依賴分析，從而讓公共的依賴被提取出來。因爲後編譯是在前端應用構建時一塊兒構建，因此babel轉換的API只有一份，不會冗餘。 缺點：包的babel配置要與應用的babel配置兼容，依賴包不能使用alias和DefinePlugin。編譯時間會變長。

2.按需導入

3.

4.

5.是否使用彈性盒佈局

6.安裝完成以後，會有一個提示，在項目中添加了哪些文件

下面說一說cube-ui的rem佈局：
cube-ui 默認會安裝postcss-px-to-viewport

• 可選的 amfe-flexible, 也就是 lib-flexible 動態計算更新 rem 的值（注 2.x 版本）
• 選擇了 postcss 的插件 postcss-px2rem 做爲將 px 轉換爲 rem 的庫

//在package.json
 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }
複製代碼

在這裏若是設計稿是750，設備是375，假設在750上是100px，在不修改默認配置的狀況下，咱們應該寫成50px，postcss會將px單位自動轉化成rem單位