浅谈基于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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
javascript插入样式实现代码
Feb 22 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
js闭包学习心得总结
Apr 17 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
js实现右键弹出自定义菜单
Sep 08 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获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python函数返回值实例分析
2015/06/08 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
股份转让协议书
2014/04/12 职场文书
采购部长岗位职责
2014/06/13 职场文书
国际金融专业自荐信
2014/07/05 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技