npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vimo

v1.1.17

Published

A Vue2.x UI Project For Mobile & HyBrid

Downloads

250

Readme

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