cube-ui是滴滴公司的技术团队基于Vue。js实现的精致移动端组件库。很赞,虽然组件还不是很多,但是基本场景是够用了,感谢开源!
首先创建一个vue项目
vue init webpack我的项目
光盘我的项目
npm安装
安装cube-ui
npm安装cube-ui - s
官方推荐使用babel-plugin-transform-modules插件,可以更优雅引入组件模块以及对应的样式。
npm安装babel-plugin-transform-modules - d
然后配置下这个插件,修改.babelrc:(添加到插件中去)
{
“插件”:(
[" transform-modules ", {
" cube-ui ": {
“转换”:“cube-ui/lib/${成员}”,
“kebabCase”:没错,
“风格”:{
“忽略”:(“create-api”、“better-scroll”)
}
}
})
］
}
<强>引入方式1:全部引入
一般在入口文件主要。js中:
从“Vue”进口Vue
从“cube-ui”//进口立方体一般直接放在这个位置
Vue.use(立方体)
全部引入了后就相当于全局注册了,直接用就可以了。不需要在每个。vue文件中导入{…}(局部引用),以及组件{…}局部注册了。
<强>引入方式2:按需引入
进口{/* eslint-disable no-unused-vars */风格,//必需
按钮
从“cube-ui”}
注意:按需引入的话,是不会打包基础样式部分的,所以在使用的时候需要引入风格模块。
<强>注册方式可选全局注册也可以选择局部注册:
//全局注册
Vue.use(按钮)//在入口文件中//或者局部注册//某个组件中
{
组件:{
CubeButton:按钮
}
}
所有的可按需引入的组件:
进口{
按钮,
复选框,
加载,
提示,
烤面包,
选择器、
TimePicker,
对话框中,
ActionSheet,
滚动,
幻灯片,
IndexList
从“cube-ui”}
之前
也可以引入create-api和better-scroll模块:
从“cube-ui”进口{createAPI, BetterScroll}
示例
& lt; template>
& lt; cube-button @click=" showDiaog "祝辞显示dialog
& lt;/template>
& lt; script>
出口默认{
方法:{
showDialog () {
美元。createDialog ({
类型:“警报”,
标题:“警报”,
内容:“对话框内容”
}),告诉()
}
}
}
& lt;/script>
不使用后编译
注意:cube-ui搭配webpack 2 +默认就会使用后编译,但是后编译需要有一些依赖以及配置(参见本页最后),如果不想使用后编译的话,可以直接修改webpack配置即可:
//webpack.config.js
模块。出口={//?
解决:{//?
别名:{//?
“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 ^发布”,//新增笔相关依赖(都需要额外安装:npm安装…- d)//笔类似于sass,更少
“笔”:“^ 0.54.5”,
:“stylus-loader ^ 2.1.1”,
:“webpack-post-compile-plugin ^ 0.1.2”
}
}
2,修改.babelrc,依旧依赖babel-plugin-transform-modules:
“插件”:(
[" transform-runtime "),
[" transform-modules ", {
" cube-ui ": {//注意:这里的路径需要修改到src/模块下
“转换”:“。/node_modules/cube-ui/src/模块/${成员}”,
“kebabCase”:真的
}
})
)
3,修改webpack.base.conf.js
var PostCompilePlugin=要求(“webpack-post-compile-plugin”)
模块。出口={//?
插件:[//?
新的PostCompilePlugin ()
］//?
}
