cube-ui—安装

1.cube-ui介绍

      滴滴团队、Vue、移动端、组件库

 

2.基于Vue-cli3.0,  cube-ui开发了vue-cli-plugin-cube-ui插件

 

3. 安装插件

vue add cube-ui

4.预设

Use post-compile?    // 是否使用后编译(推荐选择是)

// 后编译只不去使用编译后的代码，直接引用源码，用应用去编译这块代码。
// 后编译的优点是减少构建包的体积。

partly, import component on demand, which makes the size of imported code lighter
// 按需引用组件 (推荐)
fully, import all the compoents
// 全部引用组件

Custom theme?  // 自定义主题(推荐)

Use rem layout // 是否使用rem布局

Use vw layout  // 是否使用vm布局

5. 安装完成之后

新增文件及修改文件
src/cube-ui.js   // 引入所有的组件，根据自己的需要手动删除不需要的组件

src/theme.styl   // 列出所有组件的颜色，根据需求把颜色进行修改

vue.config.js    // 额外的配置，可以给webpack做额外的配置。
                 // 对应cube-ui而言, 对css进行额外的配置，以及添加postCompile插件

.browserslistrc  // 针对移动端进行配置修改

package-lock.json

package.json    // 添加了"transformModules"字段

"transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  }

// 配置此项内容，把cube-ui的组件当做项目的组件直接引用，然后交于项目去编译，这就是所谓的后编译，打包后项目体积会大大减少

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