詳解VUE項目中安裝和使用vant組件

更新時間：2019年04月28日 16:27:40 作者：安樹

這篇文章主要介紹了VUE安裝和使用vant組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

Vant 是有贊前端團隊基于有贊統(tǒng)一的規(guī)范實現(xiàn)的 Vue 組件庫，提供了一整套 UI 基礎組件和業(yè)務組件。

特性

50+ 個經(jīng)過有贊線上業(yè)務檢驗的組件
單元測試覆蓋率超過 90%
完善的中英文文檔和示例
支持 babel-plugin-import
支持 TypeScript
支持 SSR

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

1、創(chuàng)建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組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

詳解Vue中使用v-for語句拋出錯誤的解決方案
本篇文章主要介紹了詳解Vue中使用v-for語句拋出錯誤的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue2和Vue3中常用組件通信用法分享
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，值得收藏
2023-04-04
vue router 組件的高級應用實例代碼
這篇文章主要介紹了vue-router 組件的高級應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12
vue3中封裝axios請求最新實現(xiàn)步驟
這篇文章主要給大家介紹了關于vue3中封裝axios請求的最新實現(xiàn)步驟,在Vue 3中可以通過封裝axios來實現(xiàn)接口的統(tǒng)一管理和調用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
Vue.js3.2響應式部分的優(yōu)化升級詳解
這篇文章主要為大家介紹了Vue.js3.2響應式部分的優(yōu)化升級詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-11-11
實現(xiàn)shallowReadonly和isProxy功能示例詳解
這篇文章主要為大家介紹了實現(xiàn)shallowReadonly和isProxy功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Vue實例的對象參數(shù)options的幾個常用選項詳解
今天小編就為大家分享一篇Vue實例的對象參數(shù)options的幾個常用選項詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解vue指令與$nextTick 操作DOM的不同之處
這篇文章主要介紹了vue指令與$nextTick 操作DOM的不同之處,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08