vue專案中使用vant外掛程式

2021-10-03 05:29:12 字數 1202 閱讀 9805

下面使用vant外掛程式的方法是官方推薦的一種方法,是自動按需引入的。如果您按照下面方法沒能成功引入vant,您可以到官網去檢視其它引入方法。vant官網

在專案的根目錄下,使用npm i vant -s命令安裝vant

在專案的根目錄下,使用npm i babel-plugin-import -d命令安裝babel 外掛程式。它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

配置babel.config.js檔案

babel.config.js

module.exports =

,'vant']]

}

>

"default"

>預設按鈕<

/van-button>

"primary"

>主要按鈕<

/van-button>

"info"

>資訊按鈕<

/van-button>

"warning"

>警告按鈕<

/van-button>

"danger"

>危險按鈕<

/van-button>

<

/div>

<

/template>

import

from

'vant'

;export

default

}<

/script>

width:

100%

; height:

100%;}

<

/style>執行vue專案,您就可以看到vant外掛程式的button元件了

vant其它的元件同理也是這樣引入使用就可以了。

官方推薦這種是因為不需要再引入相對應元件的樣式,也不需要把整個vant外掛程式匯入專案中來。此方法可按照專案中引入的vant元件,自動引入對應元件的樣式,相對其它方法來說提高了專案的編譯效能

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

vant 是有贊前端團隊基於有讚統一的規範實現的 vue 元件庫,提供了一整套 ui 基礎元件和業務元件。1 建立vue專案之後進入專案目錄執行安裝命令 npm i vant s2 安裝 babel plugin import 外掛程式,babel plugin import 是一款 babel 外...

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

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

vue專案中使用jQuery

這裡是引入全域性的jquery 1.在package.json檔案中,devdependencies 物件中新增 jquery 3.1.1 2.在build資料夾下的webpack.base.conf.js檔案中新增 var webpack require webpack 增加乙個plugins p...