Vant 是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。

特性

1. 50+ 個經過有贊線上業務檢驗的組件
2. 單元測試覆蓋率超過 90%
3. 完善的中英文文檔和示例
4. 支持 babel-plugin-import
5. 支持 TypeScript
6. 支持 SSR

組件中文文檔地址：https://youzan.github.io/vant/#/zh-CN/intro

1、創建VUE項目之后進入項目目錄運行安裝命令：

npm i vant -S

2、安裝 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

npm i babel-plugin-import -D

3、在.babelrc文件中配置plugins（插件）

"plugins": [  "transform-vue-jsx",   "transform-runtime",  ["import", [{ "libraryName": "vant", "style": true }]] ],

4、按需要引入vant組件，比如我們要在HelloWord.vue組件中使用 Loading 組件，我們可以先 在組件中引入

<script>import { Loading } from 'vant'export default { components: {  [Loading.name]: Loading }}</script>

然后在頁面中加入組件代碼

<template>  <div>   <van-loading color="black" />   <van-loading color="white" />   <van-loading type="spinner" color="black" />   <van-loading type="spinner" color="white" /> </div></template>

這樣就可以看到效果了

以上所述是小編給大家介紹的VUE安裝和使用vant組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！