vue如何使用滴滴的cube-ui组件

这几天发现了个新的前端组件，滴滴的cube-ui组件库，这个是针对移动端的。

上官网： cube-ui官网

官网上有此组件的安装，这个组件的安装需要用到vue-cli的，但是当vue-cli>3的时候，我用vue add cube-ui的时候总是出错（我的vue-cli是5.x)，所以我就先试了试小于3的方法。发现也能用。

 1. 打开项目终端

npm install cube-ui --save

2. 在package.json中的devDependencies下输入要安装依赖想和版本信息，执行npm i下载相关依赖包，并且要在下边写上transformModules中的内容

 

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

3. 在vue.config.js文件中写入相关代码：

 

var PostCompilePlugin = require('webpack-post-compile-plugin')
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new PostCompilePlugin(),
            new TransformModulesPlugin()
        ],
        resolve: {
            alias: {
                'cube-ui': 'cube-ui/lib'
            }
        }
    },
}

4. 在main.js中引入css

 

import "cube-ui/lib/cube.min.css";
import Cube from "cube-ui";

Vue.use(Cube);