詳解VUE項(xiàng)目中安裝和使用vant組件
Vant 是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。
特性
- 50+ 個(gè)經(jīng)過(guò)有贊線上業(yè)務(wù)檢驗(yàn)的組件
- 單元測(cè)試覆蓋率超過(guò) 90%
- 完善的中英文文檔和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
組件中文文檔地址：https://youzan.github.io/vant/#/zh-CN/intro
1、創(chuàng)建VUE項(xiàng)目之后進(jìn)入項(xiàng)目目錄運(yùn)行安裝命令：
npm i vant -S
2、安裝 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式
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>
然后在頁(yè)面中加入組件代碼
<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組件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue中使用v-for語(yǔ)句拋出錯(cuò)誤的解決方案
本篇文章主要介紹了詳解Vue中使用v-for語(yǔ)句拋出錯(cuò)誤的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，值得收藏2023-04-04
vue router 組件的高級(jí)應(yīng)用實(shí)例代碼
這篇文章主要介紹了vue-router 組件的高級(jí)應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue刷新頁(yè)面時(shí)去閃爍提升用戶體驗(yàn)效果的實(shí)現(xiàn)方法
這篇文章主要介紹了vue刷新頁(yè)面時(shí)去閃爍提升體驗(yàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue3中封裝axios請(qǐng)求最新實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue3中封裝axios請(qǐng)求的最新實(shí)現(xiàn)步驟,在Vue 3中可以通過(guò)封裝axios來(lái)實(shí)現(xiàn)接口的統(tǒng)一管理和調(diào)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue動(dòng)態(tài)循環(huán)出的多個(gè)select出現(xiàn)過(guò)的變?yōu)閐isabled(實(shí)例代碼)
本文通過(guò)實(shí)例代碼給大家分享了vue動(dòng)態(tài)循環(huán)出的多個(gè)select出現(xiàn)過(guò)的變?yōu)閐isabled效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-11-11
實(shí)現(xiàn)shallowReadonly和isProxy功能示例詳解
這篇文章主要為大家介紹了實(shí)現(xiàn)shallowReadonly和isProxy功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
今天小編就為大家分享一篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue指令與$nextTick 操作DOM的不同之處,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08