移动端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作为中间件。确实很好用。

你可能感兴趣的:(前端,vue,移动端,UI库)