cube-ui移動組價庫的安裝配置參數及移動端適配問題

cube-ui安裝配置參數及適配

---

路過的朋友，能夠點個贊，關注一下~~~

1. 介紹

cube-ui 是基於 Vue.js 實現的精緻移動端組件庫。cube-ui 自帶移動端的適配，經過postcss-px2rem插件進行配置

• 官網：cube-ui官方網站

2. 安裝

若是使用的版本 Vue CLI vue-cli@3.X，那麼推薦你直接使用 vue-cli-plugin-cube-ui 插件。在你初始化完項目後直接執行 vue add cube-ui 便可。

vue add cube-ui

3. 預設--參數配置

• Use post-compile? 是否使用後編譯(推薦選擇是)

後編譯只不去使用編譯後的代碼，直接引用源碼，用應用去編譯這塊代碼。 後編譯的優勢是減小構建包的體積。

• partly, import component on demand...... 按需引用組件（推薦）

• fully, import all the compoents 所有引用

• Custom theme? 自定義主題(推薦)

• Use rem layout 是否使用rem佈局

• Use vw layout
  是否使用vm佈局

4. 安裝後新增文件

src/cube-ui.js   // 引入全部的組件，根據本身的須要手動刪除不須要的組件
 
src/theme.styl   // 列出全部組件的顏色，根據需求把顏色進行修改
 
vue.config.js    // 額外的配置，能夠給webpack作額外的配置。
                 // 對應cube-ui而言, 對css進行額外的配置，以及添加postCompile插件
 
.browserslistrc  // 針對移動端進行配置修改
 
package-lock.json
 
package.json    // 添加了"transformModules"字段
 
 
 // 配置此項內容，把cube-ui的組件當作項目的組件直接引用，而後交於項目去編譯，這就是所謂的後編譯，打包後項目體積會大大減小
"transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  }
 

 
src/main.js     // 引入cube-ui

複製代碼

5.配置postcss-plugin-px2rem

在 cube-ui中，自行安裝了postcss-plugin-px2rem插件，不須要再進行安裝，只需進行配置，若沒有安裝，則需自定義安裝

安裝

npm i --save postcss-plugin-px2rem

能夠在package.json中配置

var px2rem = require('postcss-px2rem');


module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}
複製代碼

配置在postcss.config.js 官方建議postcss單獨配置在文件postcss.config.js中，在根目錄下面建立文件，並進行配置。更多配置參考npm文檔

module.exports = {
  plugins: [
    // 兼容瀏覽器版本
	require('autoprefixer')({ browsers: 'last 2 versions' }),
	// px轉rem
	require('postcss-px2rem')({ remUnit: 75 })
  ]
}

複製代碼

6. 根節點的響應式變化

rem是根據根結點來計算各個子節點的值，因此根結點也要作響應式變化。自定義一個utils/setRem.js文件

export default function setRem(baseWidth = 750) {
  const dpr = window.devicePixelRatio;
  const currentWidth = document.documentElement.clientWidth;
  let remSize = 0;
  let scale = 0;
  scale = currentWidth / baseWidth;
  remSize = baseWidth / 10;
  remSize = remSize * scale;
  document.documentElement.style.fontSize = remSize + 'px';
  document.documentElement.setAttribute('data-dpr', `${dpr}`);
}

複製代碼

引入 在入口函數main.js中引入使用便可，

// 引入
import setRem from './utils/setRem'

// 使用，默認是750，也能夠諮詢指定
setRem()
複製代碼

參考文檔

• postcss-px2rem配置