Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟
更新時(shí)間：2018年12月05日 14:45:12 作者：安樹
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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 插件，它會(huì)在編譯過程中將 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 }]]
]
頁面按需引入；
可以再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>
官方文檔參考：https://youzan.github.io/vant/#/zh-CN/quickstart
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時(shí)報(bào)錯(cuò),本文給大家分享打包組件報(bào)錯(cuò):Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
一步步教你用Vue.js創(chuàng)建一個(gè)組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個(gè)組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue.js 使用axios實(shí)現(xiàn)下載功能的示例
下面小編就為大家分享一篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看2018-03-03
在Vue項(xiàng)目中實(shí)現(xiàn)首頁布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側(cè)菜單欄的代碼和樣式,實(shí)現(xiàn)一個(gè)響應(yīng)式的用戶界面2024-09-09
vue中渲染對(duì)象中屬性時(shí)顯示未定義的解決
這篇文章主要介紹了vue中渲染對(duì)象中屬性時(shí)顯示未定義的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3+vite+antd如何實(shí)現(xiàn)自定義主題
這篇文章主要介紹了vue3+vite+antd如何實(shí)現(xiàn)自定義主題問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03