一、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娱乐公司无关。