vimo

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

安装

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

LICENSE

MIT