這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在Vant中引入Vue.js，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)周村免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

1.安裝vant

npm i vant -S：這是簡寫形式。

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

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

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

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

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

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉(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 }]]
  ]

頁面按需引入；

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

1.main.js:

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

2.或者在引用的組件頁面

<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>

上述就是小編為大家分享的如何在Vant中引入Vue.js了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：如何在Vant中引入Vue.js
本文地址：http://www.chinadenli.net/article48/pechhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、面包屑導(dǎo)航、云服務(wù)器、、服務(wù)器托管、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)