【vue】滴滴cube-ui 简化安装

cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库。我主要是想使用它的upload和recyclelist！

（1）首先创建一个vue项目

vue init webpack my-project

cd my-project

npm install

（2） 安装cube-ui

npm install cube-ui -S

（3）官方推荐使用插件babel-plugin-transform-modules，因为有时候需要对ES6新的对象，对旧有项目转义兼容，需要babel-polyfill，recycleList就需要

npm install babel-plugin-transform-modules -D

（4）然后配置下这个插件，修改 .babelrc：(添加到plugins中去)

{

  "plugins": [

    ["transform-modules", {

      "cube-ui": {

        "transform": "cube-ui/lib/${member}",

        "kebabCase": true,

        "style": {

          "ignore": ["create-api", "better-scroll"]

        }

      }

    }]

  ]

}

 

//插入配置后全部内容展示：

{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }],

    "stage-2"

  ],

  "plugins": [

    ["transform-modules", {

      "cube-ui": {

        "transform": "cube-ui/lib/${member}",

        "kebabCase": true,

        "style": {

          "ignore": ["create-api", "better-scroll"]

        }

      }

    }]

  ],

  "env": {

    "test": {

      "presets": ["env", "stage-2"],

      "plugins": ["transform-vue-jsx", "istanbul"]

    }

  }

}

 

（5）引入：建议全部引入

如果想要局部引入，见下方官网：

一般在入口文件main.js中，如果要按需引入可以查看官网：

import Vue from 'vue'

import Cube from 'cube-ui' // 一般直接放在这个位置

Vue.use(Cube)

全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个.vue文件中import { … }（局部引用），以及components{ … }局部注册了。

 

（6）不使用后编译的情况

后编译概念：后编译指的是应用依赖的 NPM 包并不需要在发布前编译，而是随着应用编译打包的时候一块编译。

注意： cube-ui 搭配 webpack 2+ 默认就会使用后编译，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可：

// webpack.config.js

 

module.exports = {

  // ...

  resolve: {

    // ...

    alias: {

      // ...

      'cube-ui': 'cube-ui/lib'

      // ...

    }

    // ...

  }

  // ...

}

使用后编译见下方官网：

POST：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

现在可以使用cube-ui了