VUE

有赞开源的Vue 2.0 的 Mobile 组件库 Vant

VUE UI组件库 HTML我帮您 4月前  次浏览

有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量、可靠的移动端 Vue 组件库。包括了基础组件、Button 按钮、Cell 单元格、Icon 图标、Image 图片、Layout 布局、Popup 弹出层、表单组件、Checkbox 复选框、DatetimePicker 时间选择、Field 输入框、NumberKeyboard 数字键盘、PasswordInput 密码输入框、Picker 选择器、Radio 单选框、Rate 评分、Search 搜索、Slider 滑块、Stepper 步进器、Switch 开关、SwitchCell 开关单元格、Uploader 文件上传、反馈组件、ActionSheet 上拉菜单、Dialog 弹出框、DropdownMenu 下拉菜单、Loading 加载、Notify 消息通知、Overlay 遮罩层、PullRefresh 下拉刷新、SwipeCell 滑动单元格、Toast 轻提示、展示组件、Circle 环形进度条、Collapse 折叠面板、CountDown 倒计时、Divider 分割线、ImagePreview 图片预览、Lazyload 图片懒加载、List 列表、NoticeBar 通知栏、Panel 面板、Progress 进度条、Skeleton 骨架屏、Steps 步骤条、Swipe 轮播、Tag 标记、导航组件、Grid 宫格、IndexBar 索引栏、NavBar 导航栏、Pagination 分页、Sidebar 侧边导航、Tab 标签页、Tabbar 标签栏、TreeSelect 分类选择、业务组件、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 商品卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品导航、SubmitBar 提交订单栏

有赞开源的Vue 2.0 的 Mobile 组件库 Vant

有赞开源的Vue 2.0 的 Mobile 组件库 Vant

特性

  • 60 个组件
  • 90% 单元测试覆盖率
  • 完善的中英文文档和示例
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TS
  • 支持 SSR

轻量化

作为移动端组件库,Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。

在应用一系列的优化手段之后,目前 Vant 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。作为对比,mint-ui 的组件平均体积为 15.2KB,某些组件库的组件平均体积甚至在 25KB 以上。

Vant 之所以能保持如此小的组件体积,主要归功于我们独特的组件编译方式。目前主流的组件编译方式是通过 webpack 搭配 vue-loader 对每个组件进行编译,为每个组件生成一个打包后 JS 文件。这样的做法会产生大量的冗余代码,比如 webpack 内置的模块化代码、vue-loader 内置的 normalize 函数、重复引入的 babel helper 等等,而我们不希望在组件的编译结果中引入这些冗余代码。

一开始我们尝试通过使用 rollup 和 rollup-plugin-vue 去解决上述的问题,但很快我们就发现了更为直接的方式,即通过官方提供的 vue-template-compiler 和 babel 对组件进行编译,这样的方式简单纯粹,编译出的代码非常干净,细节在此不做赘述,有兴趣的同学可以看下 Vant 中构建部分的源码。
快速迭代

另外一个很重要的理念是快速迭代。有赞前端团队几十个工程师每天都在用的就是现在你看到的 GitHub 上这个版本,我们并没有一个所谓的“内部版”。同时,出于对自己名誉的珍视,我们不是简单地把它开源了事,而是把它当做一款技术产品去维护,不单单自己用的爽,也要让别人好用,因此我们会保持对社区需求的快速响应、对 bug 及时跟进并修复。

迄今为止项目 commit 总数超过 1600 次,解决 issue 300 个,合并 Pull Request 400 个,发布 90 次,基本上保持了一周 1 ~ 2 次的发布节奏。这里面包含了很多社区开发者的付出,感谢他们对 Vant 作出的贡献~ 在未来我们也会继续保持这样的开发节奏,为社区输出更好的开源产品。
生态化

除了提供组件以外,我们也在为丰富 Vant 的开发生态做很多尝试,希望能覆盖各个场景下的开发需求,为大家提供便利。下面是我们现有的一些生态或能力:

    基于 vue-cli 的脚手架 vue-cli-template-vant
    支持 nuxt 服务器端渲染
    支持 Typescript 类型检测
    支持 i18n 多语言定制
    支持通过 postcss 插件进行主题定制
    官方 Demo 仓库 - vant-demo
    基于相同视觉规范的小程序组件库 - zanui-weapp
    开源社区的移动商城示例项目 - vant--mobile-mall

示例工程

我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为 Vant Demo,示例工程会帮助你了解如下内容:

  • 基于 vant 搭建单页面应用,配置按需引入
  • 配置 rem 适配方案
  • 配置 viewport 适配方案
  • 配置 TypeScript 工程
  • 配置自定义主题色方案

安装

# 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 

引入组件

方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件 npm i babel-plugin-import -D 
// 在.babelrc 中添加配置 // 注意:webpack 1 无需设置 libraryDirectory { "plugins": [
    ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }]
  ]
} // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugins: [
    ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant']
  ]
}; 
// 接着你可以在代码中直接引入 Vant 组件 // 插件会自动将代码转化为方式二中的按需引入形式 import { Button } from 'vant'; 

如果你在使用 TypeScript,可以使用 ts-import-plugin 实现按需引入

方式二. 手动按需引入组件

在不使用插件的情况下,可以手动引入需要的组件

import Button from 'vant/lib/button'; import 'vant/lib/button/style'; 

方式三. 导入所有组件

Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法

import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css';

Vue.use(Vant); 

注意:配置 babel-plugin-import 插件后将不允许导入所有组件

方式四. 通过 CDN 引入

<!-- 引入样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css"> <!-- 引入组件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script> <script> var Vue = window.Vue; var vant = window.vant; // 注册组件 Vue.use(vant); // 调用函数式组件 vant.Toast('提示'); </script> 

其他

Rem 适配

Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具

下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7']
    }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*']
    }
  }
} 

注意:在配置 postcss-loader 时,应避免 ignore node_modules 目录,这会导致 Vant 的样式无法被编译

在桌面端使用

Vant 组件默认只适配了移动端设备,如果你需要在桌面端使用 vant,可以引入我们提供的 @vant/touch-emulator.

# 安装模块 npm i @vant/touch-emulator -S 
// 引入模块后自动生效 import '@vant/touch-emulator'; 



相关链接

发表评论