1.1.17 • Published 6 years ago

vimo v1.1.17

Weekly downloads
139
License
MIT
Repository
github
Last release
6 years ago

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

1.1.17

6 years ago

1.1.15

6 years ago

1.1.14

6 years ago

1.1.13

6 years ago

1.1.11

6 years ago

1.1.10

6 years ago

1.1.9

6 years ago

1.1.8

6 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

0.9.7

6 years ago

0.9.6

6 years ago

0.9.3

6 years ago

0.9.2

6 years ago

0.9.0

6 years ago

0.8.1

6 years ago

0.8.0

6 years ago

0.7.10

6 years ago

0.7.9

6 years ago

0.7.8

6 years ago

0.7.7

6 years ago

0.7.6

6 years ago

0.7.5

6 years ago

0.7.4

6 years ago

0.7.3

6 years ago

0.7.2

6 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.3

6 years ago

0.6.2

6 years ago

0.6.1

6 years ago

0.6.0

6 years ago

0.5.50

7 years ago

0.5.47

7 years ago

0.5.45

7 years ago

0.5.44

7 years ago

0.5.43

7 years ago

0.5.42

7 years ago

0.5.41

7 years ago

0.5.40

7 years ago

0.5.39

7 years ago

0.5.37

7 years ago

0.5.36

7 years ago

0.5.35

7 years ago

0.5.34

7 years ago

0.5.33

7 years ago

0.5.32

7 years ago

0.5.31

7 years ago

0.5.30

7 years ago

0.5.29

7 years ago

0.5.28

7 years ago

0.5.27

7 years ago

0.5.26

7 years ago

0.5.25

7 years ago

0.5.24

7 years ago

0.5.23

7 years ago

0.5.22

7 years ago

0.5.21

7 years ago

0.5.20

7 years ago

0.5.19

7 years ago

0.5.18

7 years ago

0.5.17

7 years ago

0.5.16

7 years ago

0.5.15

7 years ago

0.5.14

7 years ago

0.5.13

7 years ago

0.5.12

7 years ago

0.5.11

7 years ago

0.5.10

7 years ago

0.5.9

7 years ago

0.5.8

7 years ago

0.5.7

7 years ago

0.5.6

7 years ago

0.5.5

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.8

7 years ago

0.4.7

7 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.9

7 years ago

0.3.8

7 years ago

0.3.6

7 years ago

0.3.5

7 years ago

0.3.4

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago