vant 安装

一、vant 简介

二、安装

三、问题

 

一、vant 简介

　　Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。

　　我是一个vue项目要使用到前端框架，就使用了这个，感觉还蛮好用的。

二、安装

　　1、可以进入官网查看安装攻略。

　　命令行到自己的项目目录下

　　我使用的是vue3,所以安装组件是

　　npm i vant

　　如果是vue2

　　npm i vant@latest-v2

　　在package.json 文件下看到

　　那就是装好了。

　　2、在项目中引用

　　在官网有两种注册方式

import { Button } from 'vant';
import { createApp } from 'vue';

const app = createApp();

// 方式一. 通过 app.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
app.use(Button);

// 方式二. 通过 app.component 注册
// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
app.component(Button.name, Button);

 

　　我用的是第一种方式，还有一种局部的引入方式

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

　　这个应该是自定义组件的时候用吧，暂时没用过这种。

　　在页面中就可以引用了

　　

<van-button  type="success" text="发送" @click="send"></van-button>

 

三、问题

　　1、虽然引入的组件，但是样式有问题，那就需要引入样式

import { Button } from 'vant';
//  要引入样式使用
import 'vant/lib/index.css';
import { createApp } from 'vue';

const app = createApp();


app.use(Button);