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