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

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

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(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 的寫法自動轉(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.或者在引用的組件頁面

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