近期在開發h5端專案，用到vant框架，vant是一款基於vue的移動ui元件，看了vant的官方文件（感覺不錯，功能比較齊全，視覺化頁面效果也不錯，接下來與大家分享一下vant引入流程。
1、在專案裡面安裝 vant：npm install vant -s
也可簡寫為：npm i vant -s （接下來 install 將簡寫為 i ）
安裝完成之後就可以在 package.json 的依賴關係（dependencies）中看到 vant 及版本
2、接下來安裝 babel-plugin-import ，這是一款babel外掛程式，這樣就可以按需引入功能了。
3、然後要在 .babelrc.js 中配置 plugins（外掛程式）
cli3的配置如下：
4、然後按需引入 vant 元件，例如在 index.vue 中使用 button 元件，就可以直接在 index.vue 中引入
5、如果多個頁面組要用到同乙個元件（button），可以再 main.js 中引入
vue專案中使用vant外掛程式
下面使用vant外掛程式的方法是官方推薦的一種方法，是自動按需引入的。如果您按照下面方法沒能成功引入vant，您可以到官網去檢視其它引入方法。vant官網 在專案的根目錄下，使用npm i vant s命令安裝vant 在專案的根目錄下，使用npm i babel plugin import d命令...
vue使用vant框架的toast 輕提示框功能
推薦使用 vue 官方提供的腳手架 vue cli 3 建立專案 安裝 vue cli npm install g vue cli 建立乙個專案 vue create hello world 通過 npm 安裝 npm i vant s babel plugin import 是一款 babel 外...
VUE專案中安裝和使用vant元件
vant 是有贊前端團隊基於有讚統一的規範實現的 vue 元件庫，提供了一整套 ui 基礎元件和業務元件。1 建立vue專案之後進入專案目錄執行安裝命令 npm i vant s2 安裝 babel plugin import 外掛程式，babel plugin import 是一款 babel 外...