vue 学习笔记 cube-ui1. 后编译的思想是不会在包发布的时候进行编译，而是会在使用这个包的前端项目构建的时候

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.按需导入

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单位