Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。 npm i vant -S ：这是简写形式。 npm install vant --save :这是完整写法。如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。安装好vant后，可以使用以前常用的方法进行引入-这是一种全局引入的方式。直接在src/main.js进行全局引入。

特性

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

建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-plugin-import，通过 babel 插件使用 Vant，可以优化代码体积，提高前端性能。

安装

简写形式：npm i vant -S
完整形式：npm install vant -save

按需引入

1.需要安装babel插件 --babel-plugin-import

指令:npm i babel-plugin-import -D (简写)
完整指令:npm install babel-plugin-import --save-dev

在babel.config.js中配置文件

// 在.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']]
};

在main.js中引入即可在组建中使用【跟element很像】

import { Button } from 'vant'
Vue.use(Button)

全局引用

1.直接在main.js中直接引入如下

import Vant from   "vant"
import "van/lib/vant-css/index.css"
Vue.use(vant)

2.在需要的组建中直接引入然后使用

import { Button } from 'vant'<van-button type="primary">主要按钮</van-button>

vant的安装和引入相关推荐

vant自动按需引入组件 (推荐)
vant自动按需引入组件 (推荐) 安装 # 通过 npm 安装 npm i vant -S babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法 ...
uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序
uniapp平台使用vant组件按需引入,并兼容到微信.百度.抖音小程序请先了解vant在各小程序的兼容情况前置条件温馨提示兼容到百度swan自定义组件兼容到抖音tt自定义组件请先了解va ...
python怎么安装requests库-Python3.6安装及引入Requests库的实现方法
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...
python用代码安装3.6_Python3.6安装及引入Requests库的实现方法
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...
有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
微信小程序中vant/weapp安装，初始化，及使用
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用. Vant Weapp官网:https://yo ...
【vant】app局部引入vant组件
1.npm i vant -S 2 按需引入安装babel-plugin-import npm i babel-plugin-import -D 3 需要在main.js引入 import 'van ...
python怎么安装requests库-Python3.6安装及引入Requests库
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...
Python3.6安装及引入Requests库
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...

vant的安装和引入

特性

安装

按需引入

全局引用

vant的安装和引入相关推荐

最新文章

热门文章