简介
轻量、可靠的移动端 Vue 组件库，MIT协议, 目前github star 数9k
推荐理由
- 55 个组件
- 90% 单元测试覆盖率
- 完善的中英文文档和示例
- 支持按需引入
- 支持主题定制
- 支持国际化
- 支持 TS
- 支持 SSR
浏览器支持
现代浏览器以及 Android 4.0 , iOS 6
本地开发
- 安装
# 通过 npm 安装npm i vant -S# 通过 yarn 安装yarn add vant
- 快速上手
- 导入所有组件
import Vue from \’vue\’;import { Button } from \’vant\’;import \’vant/lib/index.css\’;Vue.use(Button);
- 通过 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>
- 自动按需引入组件 (推荐)
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\’;
官方示例工程
Vant-demo.截图如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
