詳解VUE項(xiàng)目中安裝和使用vant組件
更新時間：2019年04月28日 16:27:40 作者：安樹
這篇文章主要介紹了VUE安裝和使用vant組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
Vant 是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。
特性
- 50+ 個經(jīng)過有贊線上業(yè)務(wù)檢驗(yàn)的組件
- 單元測試覆蓋率超過 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 插件，它會在編譯過程中將 import 的寫法自動轉(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>
然后在頁面中加入組件代碼
<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組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家分享一篇在vue項(xiàng)目中,使用axios跨域處理，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面添加水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇VUE 解決mode為history頁面為空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue常用傳值方式、父傳子、子傳父及非父子實(shí)例分析
這篇文章主要介紹了Vue常用傳值方式、父傳子、子傳父及非父子,結(jié)合實(shí)例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue.js編譯時給生成的文件增加版本號，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-列表下詳情的展開與折疊案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在本篇文章里小編給大家整理的是關(guān)于VUE中表格的寫法實(shí)例以及相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們可以參考下。2019-08-08
vue項(xiàng)目國際化vue-i18n的安裝使用教程
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項(xiàng)目。由于最近需要實(shí)現(xiàn)國際化功能，所以下面這篇文章主要介紹了vue項(xiàng)目國際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
前端報錯npm ERR! cb() never called!問題解決辦法
最近接手了一個前臺項(xiàng)目,執(zhí)行npm install的時候一直報錯,所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報錯npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下2024-05-05