cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库。很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们。
刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助。

(一)创建一个vue项目

(1) (安装全局vue-cli,通过vue -V查看版本)

npm  install  -g  vue-cli

(2)vue init 你用的模板工具 项目名称 (这里采用webpack作为模板工具)

vue  init  webpack  cubeUiPro

(根据选项填写或者选择,可以按enter键进入下一步)如下图
(3)安装成功后进入你的项目目录

cd  cubeUiPro

(4) 启动项目啦

npm run dev

(二)安装cube-ui

建议大家先看看官网快速上手怎么说:https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

安装:注意:此安装部分只针对于 vue-cli < 3 的情况,vue -V查看你的版本去,cue-cli>3的请移步官网哦)

npm   install  cube-ui  --save

cube-ui 搭配 webpack 2+ 支持后编译普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。

  • 后编译
    (1)修改 package.json 并安装依赖
{
// webpack-transform-modules-plugin 依赖 transformModules
"transformModules": {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
},
"devDependencies": {
// 新增 stylus 相关依赖
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack-post-compile-plugin": "^0.4.1",
"webpack-transform-modules-plugin": "^0.3.5"
}
}

(2)修改 webpack.base.conf.js

var PostCompilePlugin = require('webpack-post-compile-plugin')
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
// ...
plugins: [
// ...
new PostCompilePlugin(),
new TransformModulesPlugin()
]
// ...
}

(3)修改 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)
}
}

(4)修改 vue-loader.conf.js

module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: false
}),
// ...
}

具体参见 https://github.com/vuejs-templates/webpack/pull/970/files

(5)index.html中引入以下文件

<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">

到此为止后编译配置完毕,用后编译就后编译哦,普通编译和后编译不能混着配置,就是说你不能既要配置普通编译还要配置后编译,会报错哒(作为一个过来人的忠告,嘻嘻),下面看看普通编译

  • 普通编译
    (1)修改 package.json 并安装依赖
{
// webpack-transform-modules-plugin 依赖 transformModules
"transformModules": {
"cube-ui": {
"transform": "cube-ui/lib/${member}",
"kebabCase": true,
"style": {
"ignore": ["create-api", "better-scroll", "locale"]
}
}
},
"devDependencies": {
"webpack-transform-modules-plugin": "^0.3.5"
}
}

(2)修改 webpack 配置:

// webpack.config.js
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
// ...
resolve: {
// ...
alias: {
// ...
'cube-ui': 'cube-ui/lib'
// ...
}
// ...
}
// ...
plugins: [
// ...
new TransformModulesPlugin()
]
// ...
}

(3)同样的要引入CDN文件到index.html中

<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">

(三)使用

全部引入(推荐,简单粗暴(嘻嘻))
一般在入口文件main.js中:

import Vue from 'vue'
import Cube from 'cube-ui' Vue.use(Cube)

按需引入这里就暂时不介绍了哦,可以到官网看看哦,下面是个例子

  • 案例
<template>
<cube-button @click="showDialog">show dialog</cube-button>
</template> <script>
export default {
methods: {
showDialog() {
this.$createDialog({
type: 'alert',
title: 'Alert',
content: 'dialog content'
}).show()
}
}
}
</script>

运行你的项目看看是不是ok啦,以上是本文的全部内容,菜鸟总结,希望大神多多指点哦

Vue项目中使用基于Vue.js的移动组件库cube-ui的更多相关文章

  1. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  2. Vue项目中如何引用外部js

    第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...

  3. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  4. 在vue项目中使用element-ui的Upload上传组件

    <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadD ...

  5. 在vue项目中使用canvas-nest.js,报parameter 1 is not of type &#39;Element&#39;

    canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...

  6. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  7. &lt;转载&gt; VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  8. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  9. vue项目中net::ERR_CONNECTION_TIMED_OUT错误

    我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...

随机推荐

  1. 实时跟踪log变化的工具Apachetop

    作为一个网站管理员,我们经常会有需要知道当前什么人正在访问我们的网站,谁正在频繁的抓取我们网站的内容,什么搜索引擎正在抓取我们网站?面对这些问题,我们虽然可以去查看log日志文件,但是却不能让我们实时 ...

  2. [CI] 使用Jenkins自动编译部署web应用

    写在前面 初步接触持续集成自动化过程,本篇主要介绍基于Jenkins实现持续集成的方式,通过案例介绍线上自动编译及部署的配置过程 持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作 ...

  3. [外挂1] MFC 鼠标位置设置

      a.取得窗口相对坐标  b.读出游戏窗口信息GetWindowRect c.移动鼠标指针SetCursorPos HWND gameh;//游戏窗口句柄 RECT r1;//RECT结构表示一个矩 ...

  4. selenium + python 自动化测试环境搭建

    selenium + python 自动化测试 —— 环境搭建 关于 selenium Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操 ...

  5. linux + ffmpeg + eclipse 调试

    使用linux + ffmpeg + eclipse调试步骤OS : ubuntu 12.04Eclipse : 3.7.2 为Eclipse安装cdt插件,使其支持c/c++ 导入ffmpeg项目 ...

  6. Windows 10正式版官方原版ISO镜像下载

    [微软官方]下载地址1:官方下载工具(32-位系统版本)官方下载工具(64-位系统版本) [MSDN]下载地址2:cn_windows_10_multiple_editions_x64_dvd_684 ...

  7. [2015编程之美] 资格赛C

    #1150 : 基站选址 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 需要在一个N × M的网格中建立一个通讯基站,通讯基站仅必须建立在格点上. 网格中有A个用户,每个 ...

  8. &lt;转&gt;MySQL性能优化的最佳20+条经验

    http://coolshell.cn/articles/1846.html 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心 ...

  9. 安卓开发入门之activity

    安卓开发主要用到的是java语言,对于一个activity,自己写的程序可以继承至Activity,该Activity先会运行一个叫 onCreat()的类,可以在其中申明一些初始化的函数等,这个函数 ...

  10. #define宏与const的区别

    1.#define宏的用法 #define用宏名代替一个字符串,这样便于修改,提高了程序的可移植性.编译器在编译预处理时只对宏做文本替换,而不进行类型检查,所以替换后可能产生一些副作用. 带参数的宏类 ...