移动端vue开发实用UI库

cube-ui 安装和使用

在vue-cli 中安装cube-ui 的时候，需要注意版本，vue-cli 版本 >= 3.0 直接一行命令就行了。

vue add cube-ui

而且在安装cube-ui 的时候，它就已经自动的将组件导入到了 main.js中了，不需要手动导入了。安装cube-ui后，会自动生成这个文件。是一个配置文件。

但vue-cli 版本 <= 3.0 的时候，配置很复杂，而且也被很多开发者吐槽。
官方文档在这里说的比较详细 https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start
，这里就不详细叙述了

然后就是直接在组件中使用了，对于移动端来说，cube-ui 确实是一个比较好用，同时功能强大的ui工具，不仅如此，它还提供了一个非常好用的功能，就是create-api,我简单的介绍一下create-api 的功能。

create-api

该模块默认暴露出一个 createAPI 函数，可以实现以 API 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以在普通 js 文件中调用。

注： 所有通过 createAPI 实现的通过 API 的形式调用的自定义组件（cube-ui 内置的组件）都需要通过 Vue.use 注册才可以。
新建register.js 这个文件，和mian.js同级，导入 vue,和要使用的组件。

import { createAPI } from 'cube-ui'
import Vue from 'vue'
import HeaderDetail from 'components/header-detail/header-detail'

createAPI(Vue, HeaderDetail) 

在组件中，这样使用。

  this.headerDetailComp = this.headerDetailComp || this.$createHeaderDetail({
          $props: {
            seller: this.seller
          }
        })
  this.headerDetailComp.show()

而且 被使用的组件一定要有 name 属性，还一定要一一对应，不能出错，否则会报错。

 name: 'header-detail',

这个功能给我们开发者提供了很大的便利，就是我们不需要在组件里嵌套自定义组件，减少组件的大小，也不需要写一大堆判断的代码，直接利用一个第三方文件 register.js作为中间件。确实很好用。