Cube-UI详解

小蓝 • 2024-12-30 16:09 • 编程

一、cube-ui 使用

在Vue.js移动端开发中，使用Cube-UI可以使页面开发变得简洁、高效。在项目导入cube-ui后，可以安装和导入需要使用的组件。例如：

<template>
  <div>
    <cube-button>Click me!</cube-button>
  </div>
</template>

<script>
import { Button } from 'cube-ui'

export default {
  components: {
    'cube-button': Button
  }
}
</script>

<style>
/* 修改按钮样式 */
.cube-button {
  border-radius: 30px;
  background-color: #ff6600;
}
</style>

上述代码中，导入了Button组件，并将其注册为“cube-button”，在<template>标签中使用了<cube-button>标签调用。在<style>标签中，重写了按钮的样式。

二、cube-ui后编译

在使用cube-ui的过程中，经常遇到Cube-UI样式不生效的问题。这是由于Vue-loader默认会在编译时将class和style加上局部作用域。为了让cube-ui的样式生效，需要开启Vue-loader的全局样式提取。下面是开启全局样式提取的方法：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 开启全局样式提取
        modules: false,
        // 一些Cube UI的样式禁止modules处理
        localIdentName: '[local]_[hash:base64:8]'
      },
      less: {
        // 一些组件需要编译less
        globalVars: {
          'cube-ui': {
            // less 
          }
        }
      }
    }
  }
}

三、cube-ui没有转成vw

Cube-UI默认是不支持vw单位的，但可以通过修改webpack配置来实现。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 375,
            viewportHeight: 667,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,
            mediaQuery: false
          })
        ]
      }
    }
  }
}

四、cube-ui form

在移动端开发中，form表单是非常常见的组件，而Cube-UI也提供了相应的表单组件。

<template>
  <div>
    <cube-form>
      <cube-form-group
        title="Input"
        :required="true"
        :errMsg="errMsg">
        <cube-input v-model="formData.input" placeholder="Please input"></cube-input>
      </cube-form-group>
    </cube-form>
  </div>
</template>

<script>
import { Form, FormGroup, Input } from 'cube-ui'

export default {
  components: {
    CubeForm: Form,
    CubeFormGroup: FormGroup,
    CubeInput: Input
  },
  data () {
    return {
      errMsg: '',
      formData: {
        input: ''
      }
    }
  }
}
</script>

<style>
/* 自定义错误提示样式 */
.cube-form-group .cube-error {
  color: #f00 !important;
}
</style>

上述代码中，导入了表单组件Form、FormGroup、Input，并在<template>标签中使用了<cube-form>、<cube-form-group>、<cube-input>标签。在<script>标签中，定义了“errMsg”和“formData”两个data数据，并将组件注册。在<style>标签中，重写了错误提示的样式。

五、cubeui-docker-ui

CubeUI DockeUI是一个基于Docker的UI项目部署系统，它使用了Vue框架、cube-ui组件库、Socket.IO和Node.js。可以方便快捷地部署和管理Docker容器。

// 具体部分请看GitHub
https://github.com/hwzhili/cubeui-docker-ui

六、cubeui公司

CubeUI是由滴滴出行前端开发工程师推出的一款基于Vue.js的手机UI组件库。CubeUI组件库相比于最初的Use-UI，CubeUI有更快、更稳定的性能。cube-ui公司主要产品是移动端UI组件和一些新型的呈现方式。

七、cube音响

Cube音响是DIY音响器材生产公司。此外，Cube音响主要生产自定义音频视频拼接处理方案、多屏互动及前端呈现技术，主要为企业定制化解决方案。

八、cube娱乐公司

Cube娱乐公司是韩国的一家娱乐公司，成立于2008年。cube-ui和Cube娱乐公司无关。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301452.html