cube-ui的簡化安裝

cube-ui是由滴滴內部技術團隊基於 Vue.js 實現的精致移動端組件庫，關於它的安裝使用在其官網上都有詳細的介紹https://didi.github.io/cube-ui/#/zh-CN，下面是cube-ui的一個簡化安裝配置過程（此安裝配置只針對於 vue-cli < 3 的情況）。

1、cube-ui安裝

npm install cube-ui --save

2、由於有時需要對ES6新對象，對舊項目有轉義兼容，需要babel-polyfill，故還需安裝插件babel-plugin-transform-modules

npm install babel-plugin-transform-modules -D

3、對此插件做一些配置，修改.babelrc文件（對plugins做修改）

"plugins": [
    ["transform-modules", {
      "cube-ui": {
        "transform": "cube-ui/lib/${member}",
        "kebabCase": true,
        "style":{
           "ignore": ["create-api", "better-scroll"]
         }
      }
    }]
   ],

//插入配置后.babelrc文件全部內容展示
{
  "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"]
   }
  }
}

4、在utils.js文件中做配置

const stylusOptions = {
    'resolve url': true
}

5、引入（推薦全局引入）

在main.js中做引入

import Vue from 'vue'
import Cube from 'cube-ui' // 一般直接放在這個位置
Vue.use(Cube)

全局引入也就相當於全局注冊了，現在cube-ui就可以使用了，全局引入后就不需要在每個需要使用該組件庫的.vue文件中做局部引入（import { … }）和注冊（components{ … }）了。