vue3中Vant的使用及说明

时间:2023-02-03 小杨不香菜人气:0

vue3中Vant的使用

一. 安装Vant组件库

1.通过npm安装

# Vue 3 项目，安装最新版 Vant
npm i vant
 
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

二. 引入组件（推荐）

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，推荐安装 unplugin-vue-components 插件，它可以自动按需引入组件

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 的项目，在 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. 导入所有组件（不推荐）

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

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

2.手动按需引入组件（不推荐）

在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件，则无须引入
import 'vant/es/button/style/index';

这些都是根据官方文档给出的使用方法，详情可见官方 :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的文件

//在原本代码后面补充这段代码
"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
 
 
 
//补充完后效果
{
  "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">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</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">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容