如何在Vant中引入Vue.js

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

Vue的優(yōu)點

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

1.安裝vant

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

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

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

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

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

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

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

# 安裝 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了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業(yè)資訊頻道。