有赞技术团队vue开源UI框架vant快速入门

简介

轻量、可靠的移动端 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.截图如下：