Skip to content
This repository has been archived by the owner on Jan 10, 2019. It is now read-only.

vm-component/vimo

Repository files navigation

vimo

Hello Vimo

Build Status Coverage Status npm version npm downloads standardjs liense

A H5 Platform For Hybrid

DEMO

vimo
https://vm-component.github.io/vimo-demo

FEATURE

移动端H5组件库

VImo是一套移动端H5组件库,包括移动端开发常用到的组件。 目前已经完成86个组件编写,测试还在覆盖中。

样式自由更改

Vimo继承了Ionic的样式集,默认情况下可以根据平台自行切换皮肤(上面的二维码可使用IOS或者Android扫码体验),当然,这也为开发定制符合自己公司UI规范的主题提供了可能。此外,也可以通过node-sassoptions.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

安装

import { App, Content, Footer, Header, Nav, Navbar, Page, Install } from 'vimo'

// ----------------------
// 平台基础安装
Vue.use(Install, {
  custConf: APP_CONFIGS,
  pltConf: PLATFORM_CONFIGS,
  router: router
})
// 全局注册的组件(核心组件)
Vue.component(App.name, App)
Vue.component(Nav.name, Nav)
Vue.component(Navbar.name, Navbar)
Vue.component(Page.name, Page)
Vue.component(Header.name, Header)
Vue.component(Content.name, Content)
Vue.component(Footer.name, Footer)
// ----------------------

其余部分参考标准的文件组织结构:Demo示例

使用种子项目

Vimo项目初始化种子vimo-start-kit,包括自定义主题文件。点击进入项目地址:vimo-start-kit

LAZY SCHEME

babel-plugin-import

Vimo支持babel-plugin-import按需加载方式,每个组件都是一个入口,可在项目中单独使用不必安装。关于如何配置参考下面代码:

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "vimo",
        "libraryDirectory": "lib/components"
      }
    ]
  ]
}

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-sassoptions.data的方式覆盖主题变量。关于主题定制,可参考《关于组件库的主题定制》

LICENSE

MIT