浅谈基于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 学习笔记(五)
Dec 31 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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+APACHE实现用户论证的方法
2006/10/09 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python学生管理系统
2019/01/30 Python
python实现电子书翻页小程序
2019/07/23 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
英文投诉信格式
2015/07/03 职场文书
python flask框架快速入门
2021/05/14 Python