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配置

cube-ui移动组价库的安装配置参数及移动端适配问题