浅谈基于Vue.js的移动组件库cube-ui


Posted in Javascript onDecember 20, 2017

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)
 }
}

运行看看成果:

npm run dev

浅谈基于Vue.js的移动组件库cube-ui

浅谈基于Vue.js的移动组件库cube-ui

参考官方文档;体验一下官方给的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
Angular2+如何去除url中的#号详解
Dec 20 #Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
关于php开启错误提示的总结
2019/09/24 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python中函数传参详解
2016/07/03 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
小学一年级评语大全
2014/04/22 职场文书
工商干部先进事迹
2014/05/14 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
行政诉讼答辩状
2015/05/21 职场文书
车辆管理制度范本
2015/08/05 职场文书
化工厂员工工作总结
2015/10/15 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL