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{ … }）了。

转载于:https://www.cnblogs.com/attacking-cabbage/p/11171579.html