VUE專案中安裝和使用vant元件

2021-08-22 14:45:21 字數 531 閱讀 6262

vant 是有贊前端團隊基於有讚統一的規範實現的 vue 元件庫,提供了一整套 ui 基礎元件和業務元件。

1、建立vue專案之後進入專案目錄執行安裝命令:

npm i vant -s
2、安裝 babel-plugin-import 外掛程式,babel-plugin-import 是一款 babel 外掛程式,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

npm i babel-plugin-import -d
3、在.babelrc檔案中配置plugins(外掛程式)

"plugins": [

"transform-vue-jsx", 

"transform-runtime",

["import", ]

],4、按需要引入vant元件,比如我們要在helloword.vue元件中使用 loading 元件,我們可以先 在元件中引入

然後在頁面中加入元件**

這樣就可以看到效果了

VUE專案中安裝和使用vant元件

首先要搭建好vue腳手架 npm i vant sbabel plugin import是一款 babel 外掛程式,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝 babel plugin import 外掛程式 npm i babel plugin import d pl...

vue專案中使用vant外掛程式

下面使用vant外掛程式的方法是官方推薦的一種方法,是自動按需引入的。如果您按照下面方法沒能成功引入vant,您可以到官網去檢視其它引入方法。vant官網 在專案的根目錄下,使用npm i vant s命令安裝vant 在專案的根目錄下,使用npm i babel plugin import d命令...

Vue專案使用vant框架

近期在開發h5端專案,用到vant框架,vant是一款基於vue的移動ui元件,看了vant的官方文件 感覺不錯,功能比較齊全,視覺化頁面效果也不錯,接下來與大家分享一下vant引入流程。1 在專案裡面安裝 vant npm install vant s 也可簡寫為 npm i vant s 接下來...