Hello Vimo
A H5 Platform For Hybrid
DEMO
https://vm-component.github.io/vimo-demo
FEATURE
移动端H5组件库
VImo是一套移动端H5组件库,包括移动端开发常用到的组件。 目前已经完成86个组件编写,测试还在覆盖中。
样式自由更改
Vimo继承了Ionic的样式集,默认情况下可以根据平台自行切换皮肤(上面的二维码可使用IOS或者Android扫码体验),当然,这也为开发定制符合自己公司UI规范的主题提供了可能。此外,也可以通过node-sass的options.data的方式覆盖主题变量。关于主题定制,可参考《关于组件库的主题定制》。
支持JSSDK集成
为了满足一套H5在不同Webview中兼容,Vimo在初始化时能根据不同平台(微信、支付宝、钉钉等)的特性,调用平台提供的模块方法,比如:在普通浏览器使用H5的ActionSheet,而在支付宝或钉钉中使用JSSDK提供的ActionSheet,可以无缝兼容(需要配好platform-config.js,上面的二维码可使用支付宝扫码体验)。
集成布局组件
这里说的组件是:App、Nav、Page、Content、Header、Footer等。
- App组件是浏览器的代理,能设置滚动状态、页面可点击状态、标题设置等
- Nav组件用于页面切换转场动画的控制(盒式布局)
- Page组件是路由指向的根组件,用于设置当前页面的布局,支持流式布局和盒式布局
- Content组件是内容组件,可以监听内容滚动事件、支持下拉刷新和上拉刷新组件等
- Header、Footer是头尾组件,能配合Cotent完成页面布局,比如位置预留、自动隐藏等
HOW TO START
使用npm自行搭建
自行搭建需要对Vimo项目比较熟悉,这里强烈推荐使用vimo-start-kit
开始,如果Vimo版本不正确,请使用npm install vimo
自行升级。
下载
$ npm install vimo@latest --save
安装
// ----------------------// 平台基础安装Vue// 全局注册的组件(核心组件)VueVueVueVueVueVueVue// ----------------------
其余部分参考标准的文件组织结构:Demo示例。
使用种子项目
Vimo项目初始化种子vimo-start-kit
,包括自定义主题文件。点击进入项目地址:vimo-start-kit。
LAZY SCHEME
babel-plugin-import
Vimo支持babel-plugin-import
按需加载方式,每个组件都是一个入口,可在项目中单独使用不必安装。关于如何配置参考下面代码:
THEME CUSTOMIZATION
样式覆盖
在业务代码中覆盖组件样式,这种写法会增大样式文件的体积,并且样式优先级不太好控制,可以用在小项目中开发,不建议长期使用。关于样式优先级的介绍参考这里:《CSS优先级计算及应用》。
Fork一份只修改主题引用(推荐)
当前方案适合构建符合你公司内部UI规范的移动端组件库。
Vimo组件库编写使用的是Vue提供的*.vue
单文件模式构建,但是样式文件是引入外部style.scss
样式。例如:
├── index.js // 组件导出├── loading.vue // 组件构建├── style.scss // 样式归总├── style| ├── loading.ios.scss // IOS主题| ├── loading.md.scss // MD主题| └── loading.scss // 其余构建相关文件
这样做是为了主题的定制不影响组件主结构更新,你可以Fork项目,自行修改style
文件夹中样式文件及style.scss
中样式引用。如果Vimo主结构更新,那就用master分支代码更新你当前Fork的项目即可。
主题变量替换(推荐)
变量替换是所有组件库都推荐的方案,因为这是一个简单修改就能直接看到效果的方案(前提是配好sass-loader
参数)。正如上面所提到,Vimo继承了Ionic的样式集,默认情况下可以根据平台自行切换皮肤。如果不满于,也可以通过node-sass的options.data的方式覆盖主题变量。关于主题定制,可参考《关于组件库的主题定制》。
LICENSE
MIT