vant-ui組件庫是有贊團隊開發(fā)維護的ui組件庫，是現階段常用的組件庫之一，涵蓋前端頁面需要的大多數常用組件，相對好用，雖然我也只是用過element-ui和vant-ui而已

我學習vue移動端app項目時就是使用vant-ui,全局引入太占內存，沒有必要，因此我們按需引入vant-ui組件庫的組件即可

第一步，下載:

npm i vant -S? 用npm包管理器下載vant-ui

yarn add vant? 用yarn

第二步，安裝插件:

npm i babel-plugin-import -D

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

第三步，配置:

.babelrc中添加代碼

找到"plugins": ["transform-vue-jsx", "transform-runtime"]，添加內容后取下

"plugins": [

? ? "transform-vue-jsx",

? ? "transform-runtime",

? ? ["import", {

? "libraryName": "vant",

? ? "libraryDirectory": "es",

? ? "style": true

? ? }]

]

使用方法

方法一:在main.js中直接引入組件

import { Button，Field，Toast } from 'vant'

Vue.use(Button)

? ? ? .use(Field)

? ? ? .use(Toast)

方法二:在src目錄utils文件下創(chuàng)建js文件，按需引入組件

import Vue from 'vue'

// 在這里引入你所需的組件

import {

? Button, //按鈕

? Toast, //輕提示

? Swipe, //輪播圖

? Field, //輸入框

} from 'vant'

// 按需引入UI組件

Vue.use(Button)

Vue.use(Toast)

Vue.use(Field)

方法三:在頁面組件中直接引入組件

import {? Button } from "vant"

export default {

components:{ [Button.name]: Button }

}