【vue】滴滴cube-ui 简化安装

cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库。我主要是想使用它的upload和recyclelist！

（1）首先创建一个vue项目

vue init webpack my-project

cd my-project

npm install

（2）安装cube-ui

npm install cube-ui -S

（3）官方推荐使用插件babel-plugin-transform-modules，因为有时候需要对ES6新的对象，对旧有项目转义兼容，需要babel-polyfill，recycleList就需要

npm install babel-plugin-transform-modules -D

（4）然后配置下这个插件，修改 .babelrc：(添加到plugins中去)

{

"plugins": [

["transform-modules", {

"cube-ui": {

"transform": "cube-ui/lib/${member}",

"kebabCase": true,

"style": {

"ignore": ["create-api", "better-scroll"]

}

}

}]

]

}

//插入配置后全部内容展示：

{

"presets": [

["env", {

"modules": false,

"targets": {

"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

}

}],

"stage-2"

],

"plugins": [

["transform-modules", {

"cube-ui": {

"transform": "cube-ui/lib/${member}",

"kebabCase": true,

"style": {

"ignore": ["create-api", "better-scroll"]

}

}

}]

],

"env": {

"test": {

"presets": ["env", "stage-2"],

"plugins": ["transform-vue-jsx", "istanbul"]

}

}

}

（5）引入：建议全部引入

如果想要局部引入，见下方官网：

一般在入口文件main.js中，如果要按需引入可以查看官网：

import Vue from 'vue'

import Cube from 'cube-ui' // 一般直接放在这个位置

Vue.use(Cube)

全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个.vue文件中import { … }（局部引用），以及components{ … }局部注册了。

（6）不使用后编译的情况

后编译概念：后编译指的是应用依赖的 NPM 包并不需要在发布前编译，而是随着应用编译打包的时候一块编译。

注意： cube-ui 搭配 webpack 2+ 默认就会使用后编译，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可：

// webpack.config.js

module.exports = {

// ...

resolve: {

// ...

alias: {

// ...

'cube-ui': 'cube-ui/lib'

// ...

}

// ...

}

// ...

}

使用后编译见下方官网：

POST：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

现在可以使用cube-ui了

【vue】滴滴cube-ui 简化安装相关推荐

cube ui 的安装
npm install cube-ui --save cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置. 普通编译 ...
vue 相关的 UI 库和插件
本文整理一些自己使用过的 UI 库和插件一.vue 相关的 UI 库 1.element ui 自己比较常用的 ui 库,后台系统还有 vue-element-admin,后台效果请看 https ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
Vue (十五) --------- UI 组件库
目录一.移动端常用 UI 组件库 1. Vant 2. Vux 3. Cube UI 4. Mint UI 二.PC 端常用 UI 组件库 1. Element UI 2. IView UI 3. ...
优秀的基于VUE移动端UI框架合集
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档在线预览 vux 基于WeUI和Vue(2.x ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
Vue移动端UI框架
自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择. 1.Vux 中文文 ...
基于vue移动端UI框架
1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...
vuemui框架_7个基于VUE移动端UI好用框架！
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k中文文档在线预览https://wangdahoo ...

【vue】滴滴cube-ui 简化安装

【vue】滴滴cube-ui 简化安装相关推荐

最新文章

热门文章