引入Vant組件庫
在工作中，有很多自己的組件庫，但是在開發這些前都會選擇一套穩定的開源的作為輪子作為基礎（大公司是有能力造自己輪子的）。因為我們要作電商系統，所以選擇有贊的Vant作為Vue的基本組件和樣式組件。
安裝Vant
npm i vant -S
安裝好后，看一下我們的package.json文件，並確認一下版本。
引入Vant的第一種方法（不推薦）
安裝好vant后，可以使用以前常用的方法進行引入-這是一種全局引入的方式。
直接在src/main.js進行全局引入。
import Vant from 'vant' import 'vant/lib/vant-css/index.css' Vue.use(vant)
簡單的三行代碼已經可以把Vant引入進來了，但是這並不夠優雅，也使得最后打包發布時會增加包的大小，Vue的SPA首屏打開時本來就有些慢，所以不建議使用這種方法進行引入。
優雅的引入Vant
vant是支持babel-plugin-import引入的，它可以讓我們按需引入組件模塊，並且不用管理我們的樣式，現在Vue項目組件庫的主流引入方法。
安裝babel-plugin-import
npm i babel-plugin-import -D
在.babelrc中配置plugins（插件）
"plugins": [ "transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}] ]
按需使用Vant組件
我們設置好.babelrc后，就可以按需引入Vant框架了。比如現在我們引入一個Button組件.
在src/main.js里加入下面的代碼：
import { Button } from 'vant'
Vue.use(Button)
有了這段代碼之后，我們就可以在需要的組件頁面中加入Button了.
<van-button type="primary">主要按鈕</van-button>