快捷導(dǎo)航

vue3中Vant的使用及說明

更新時(shí)間：2023年01月16日 10:04:36 作者：小楊不香菜

這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3中Vant的使用

一. 安裝Vant組件庫

1.通過npm安裝

# Vue 3 項(xiàng)目，安裝最新版 Vant
npm i vant
 
# Vue 2 項(xiàng)目，安裝 Vant 2
npm i vant@latest-v2

二. 引入組件（推薦）

在基于 vite、webpack 或 vue-cli 的項(xiàng)目中使用 Vant 時(shí)，推薦安裝 unplugin-vue-components 插件，它可以自動(dòng)按需引入組件

1.安裝插件

# 通過 npm 安裝
npm i unplugin-vue-components -D
 
# 通過 yarn 安裝
yarn add unplugin-vue-components -D
 
# 通過 pnpm 安裝
pnpm add unplugin-vue-components -D

2.配置插件

基于 vue-cli 的項(xiàng)目，在 vue.config.js 文件中配置插件：

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
 
module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

三. 引入組件

完成以上兩步，就可以直接使用 Vant 組件了：

import { createApp } from 'vue';
import { Button } from 'vant';
 
const app = createApp();
app.use(Button);

另外還有兩種方法

1. 導(dǎo)入所有組件（不推薦）

Vant 支持一次性導(dǎo)入所有組件，引入所有組件會(huì)增加代碼包體積，因此不推薦這種做法。

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
const app = createApp();
app.use(Vant);

2.手動(dòng)按需引入組件（不推薦）

在不使用任何構(gòu)建插件的情況下，可以手動(dòng)引入需要使用的組件和樣式。

// 引入組件腳本
import Button from 'vant/es/button/index';
// 引入組件樣式
// 若組件沒有樣式文件，則無須引入
import 'vant/es/button/style/index';

這些都是根據(jù)官方文檔給出的使用方法，詳情可見官方 :Vant 3 - Mobile UI Components built on Vue

vue2，vue3引入vant

vue2引入vant

1.npm i vant -S

2.npm i babel-plugin-import -D

3.找到后綴名為.babelrc的文件

//在原本代碼后面補(bǔ)充這段代碼
"plugins": [
? ? ["import", {
? ? ? "libraryName": "vant",
? ? ? "libraryDirectory": "es",
? ? ? "style": true
? ? }]
? ]
?
?
?
//補(bǔ)充完后效果
{
? "presets": [
? ? ["env", {
? ? ? "modules": false,
? ? ? "targets": {
? ? ? ? "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
? ? ? }
? ? }],
? ? "stage-2"
? ],
? "plugins": ["transform-vue-jsx", "transform-runtime", ["import", {
? ? "libraryName": "vant",
? ? "libraryDirectory": "es",
? ? "style": true
? }]]
}

4.引入成功后，使用步驟如下

<template>
? <div class="home">
? ? <img alt="Vue logo" src="../assets/logo.png" @click="go">
? ? <van-button type="primary">主要按鈕</van-button>
? ? <van-button type="success">成功按鈕</van-button>
? ? <van-button type="default">默認(rèn)按鈕</van-button>
? ? <van-button type="warning">警告按鈕</van-button>
? ? <van-button type="danger">危險(xiǎn)按鈕</van-button>
? </div>
</template>
?
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
? name: 'Home',
? methods:{
? ? go(){
? ? ? this.$router.push("/about");
? ? }
? },
? components:{
? ? "van-button":Button
? }
}
</script>

vue3引入vant

npm i vant@next -S

main.js / main.ts中引入

import Vant from 'vant';
import 'vant/lib/index.css';
createApp(App).use(store).use(Vant).use(router).mount("#app");

組件中使用

<template>
? <div class="home">
? ? <img alt="Vue logo" src="../assets/logo.png" @click="go">
? ? <van-button type="primary">主要按鈕</van-button>
? ? <van-button type="success">成功按鈕</van-button>
? ? <van-button type="default">默認(rèn)按鈕</van-button>
? ? <van-button type="warning">警告按鈕</van-button>
? ? <van-button type="danger">危險(xiǎn)按鈕</van-button>
? </div>
</template>
?
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
? name: 'Home',
? methods:{
? ? go(){
? ? ? this.$router.push("/about");
? ? }
? }
}
</script>