这次给大家带来移动组件库cube-ui使用详解，移动组件库cube-ui使用的注意事项有哪些，下面就是实战案例，一起来看一下。
cube-ui 是滴滴公司的技术团队基于 vue.js 实现的精致移动端组件库。很赞，虽然组件还不是很多，但是基本场景是够用了，感谢开源！
首先创建一个vue项目
vue init webpack my-project
cd my-project
npm install
安装cube-ui
npm install cube-ui -s
官方推荐使用 babel-plugin-transform-modules 插件，可以更优雅引入组件模块以及对应的样式。
npm install babel-plugin-transform-modules -d
然后配置下这个插件，修改 .babelrc：(添加到plugins中去)
{
plugins: [
[transform-modules, {
cube-ui: {
transform: cube-ui/lib/${member},
kebabcase: true,
style: {
ignore: [create-api, better-scroll]
}
}
}]
]
}
引入方式1：全部引入
一般在入口文件main.js中：
import vue from 'vue'
import cube from 'cube-ui' // 一般直接放在这个位置
vue.use(cube)
全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个.vue文件中import { … }（局部引用），以及components{ … }局部注册了。
引入方式2：按需引入
import {
/* eslint-disable no-unused-vars */
style, // 必需
button
} from 'cube-ui'
注意： 按需引入的话，是不会打包基础样式部分的，所以在使用的时候需要引入 style 模块。
注册方式 可选全局注册也可以选择局部注册：
// 全局注册
vue.use(button) // 在入口文件中
// 或者局部注册
// 某个组件中
{
components: {
cubebutton: button
}
}
所有的可按需引入的组件：
import {
button,
checkbox,
loading,
tip,
toast,
picker,
timepicker,
dialog,
actionsheet,
scroll,
slide,
indexlist
} from 'cube-ui'
也可以引入create-api和better-scroll模块：
import { createapi, betterscroll } from 'cube-ui'
示例
<template>
<cube-button @click="showdiaog">show dialog<cube-button>
</template>
<script>
export default {
methods: {
showdialog() {
this.$createdialog({
type: 'alert',
title: 'alert',
content: 'dialog content'
}).show()
}
}
}
</script>
不使用后编译
注意： cube-ui 搭配 webpack 2+ 默认就会使用后编译，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可：
// webpack.config.js
module.exports = {
// ...
resolve: {
// ...
alias: {
// ...
'cube-ui': 'cube-ui/lib'
// ...
}
// ...
}
// ...
}
使用后编译
cube-ui 搭配 webpack 2+ 后就会默认使用后编译，那么应用就需要兼容 cube-ui 的依赖和配置。
1、修改 package.json
{
// webpack-post-compile-plugin 依赖 compiledependencies
compiledependencies: [cube-ui],
devdependencies: {
babel-plugin-transform-modules: ^0.0.2,
// 新增 stylus 相关依赖 (都需要额外安装：npm install … -d)
// stylus 类似于 sass,less
stylus: ^0.54.5,
stylus-loader: ^2.1.1,
webpack-post-compile-plugin: ^0.1.2
}
}
2、修改 .babelrc，依旧依赖babel-plugin-transform-modules：
plugins: [
[transform-runtime],
[transform-modules, {
cube-ui: {
// 注意: 这里的路径需要修改到 src/modules 下
transform: ./node_modules/cube-ui/src/modules/${member},
kebabcase: true
}
}]
]
3、修改 webpack.base.conf.js
var postcompileplugin = require('webpack-post-compile-plugin')
module.exports = {
// ...
plugins: [
// ...
new postcompileplugin()
]
// ...
}
4、修改 build/utils.js 中的 exports.cssloaders 函数
exports.cssloaders = function (options) {
// ...
const stylusoptions = {
'resolve url': true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateloaders(),
postcss: generateloaders(),
less: generateloaders('less'),
sass: generateloaders('sass', { indentedsyntax: true }),
scss: generateloaders('sass'),
stylus: generateloaders('stylus', stylusoptions),
styl: generateloaders('stylus', stylusoptions)
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
一个单独页面内如何实现两个ztree联动
nodejs怎样调用微信分享功能
以上就是移动组件库cube-ui使用详解的详细内容。