Cube-UI詳解

一、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娛樂公司無關。