浅谈基于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 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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调用Google translate_tts api实现代码
2013/08/07 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python os.rename实例用法详解
2020/12/06 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
护士实习鉴定范文
2013/12/22 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
预备党员群众意见
2015/06/01 职场文书
博物馆观后感
2015/06/05 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL