【vue】滴滴cube-ui 简化安装
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库。我主要是想使用它的upload和recyclelist!(1)首先创建一个vue项目vue init webpack my-projectcd my-projectnpm install(2) 安装cube-uinpm install cube-ui -S(3)官方推荐使用插件bab...
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了
更多推荐
所有评论(0)