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了

Logo

前往低代码交流专区

更多推荐