Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟

更新時(shí)間：2018年12月05日 14:45:12 作者：安樹

這篇文章主要介紹了Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.安裝vant

npm i vant -S：這是簡(jiǎn)寫形式。

npm install vant --save:這是完整寫法。

如果你網(wǎng)絡(luò)很慢的話，可以使用淘寶的源，但是不建議使用cnpm來(lái)進(jìn)行安裝。

npm install vant --save --registry=https://registry.npm.taobao.org

淘寶鏡像，速度快，安裝后查看package.json文件里看是否安裝完成

2.1使用 babel-plugin-import (推薦)

babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式

# 安裝 babel-plugin-import 插件
npm i babel-plugin-import -D

2.2 文件.babelrc文件配置

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

更新了vue版本后。重新配置上述文件

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

頁(yè)面按需引入；

可以再main.js里寫，也可以在引用的組件頁(yè)面寫，根據(jù)自己需求或喜好。我喜好第2種寫法

1.main.js:

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

2.或者在引用的組件頁(yè)面

<template>
    <div class="detail">
      <div class="slide">
        <van-swipe :autoplay="3000">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    <van-button type="primary">主要按鈕</van-button>
    </div>
</template>
 
<script>
  import { Swipe,SwipeItem,Button } from "vant"
    export default {
      components:{
         [Button.name]:Button,
         [Swipe.name]:Swipe,
         [SwipeItem.name]:SwipeItem
      },
        data () {
            return {
            }
        },
        methods: {}
    }
</script>
<style scoped>
</style>

官方文檔參考：https://youzan.github.io/vant/#/zh-CN/quickstart

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue
Vant

相關(guān)文章

Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
vue.js實(shí)現(xiàn)的綁定class操作示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的綁定class操作,結(jié)合實(shí)例形式分析了vue.js綁定class常見(jiàn)的3種操作技巧,需要的朋友可以參考下
2018-07-07
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
vue項(xiàng)目element UI input框掃碼槍掃描過(guò)快出現(xiàn)數(shù)據(jù)丟失問(wèn)題及解決方案
這篇文章主要介紹了vue項(xiàng)目element UI input框掃碼槍掃描過(guò)快出現(xiàn)數(shù)據(jù)丟失問(wèn)題,輸入框要掉兩個(gè)接口，根據(jù)第一個(gè)驗(yàn)證接口返回的code，彈不同的框，點(diǎn)擊彈框確認(rèn)再掉第二個(gè)接口，需要的朋友可以參考下
2022-12-12
Vue3引入SVG圖標(biāo)的流程步驟
我們?cè)陂_(kāi)發(fā) Vue 項(xiàng)目的時(shí)候會(huì)使用一些前端組件庫(kù),例如 Element、Ant Design 等,這些組件庫(kù)雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開(kāi)發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)
2024-09-09
vue封裝el-upload批量上傳只請(qǐng)求一次接口
本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue使用openlayers創(chuàng)建地圖
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
解決iview table組件里的固定列表格不自適應(yīng)的問(wèn)題
這篇文章主要介紹了解決iview table組件里的固定列表格不自適應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue實(shí)現(xiàn)公共方法抽離
這篇文章主要介紹了vue實(shí)現(xiàn)公共方法抽離，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07