vant4的基础用法

基于vue3和ts平台来使用

这篇文章会手把手的教你如何用vant开发h5

介绍

       Vant 是一个轻量、可靠的移动端组件库，基于 Vue3，由有赞开发并且维护。有赞作为早期以 H5 商城、小程序商城做微信生态的起家， Vant 一直是这些产品的主要组成部分，有赞的技术团队一直在维护，非常可靠。

下面，将教大家如何使用vant4

1,安装

        npm i vant

        安装最新版本即可

2.注册

        2.1，局部注册

               在组件内单独注册

import { Button } from 'vant'; //引入组件
import 'vant/lib/index.css'; //引入样式
import { onMounted, ref } from "vue"
export default ({
    setup() {

        return {}
    },
    components: {
        vanButton: Button, //注册组件
    },
})

        2.2 ，全局注册

        在main.ts里全局注册组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import vant from "vant" //1.引入vant
import 'vant/lib/index.css'; //2。引入vant样式
createApp(App).use(store).use(router).use(ElementPlus).use(vant).mount('#app') //3、链式调用use方法，将vant传入，完成全局注册，这里我直接省事，注册了所有的vant组件，
按需注册
   import {Button} from "vant"
    createApp(App).use(store).use(router).use(ElementPlus).use(Button).mount('#app')

       建议按需。

3.定义tabbat标签栏

       3.1 在router里定义3个组件，作为我们的底部导航栏切换的基础组件，同时在定义一个主组件，用来容纳定义的基础组件

                                          

         3.2 在组件中定义好我们要显示的内容

            3.3 注册路由，将组件和路由绑定

const routes: Array = [
  {
    path:"/",  
    name:"host",
    redirect:"/home",
    component:()=>import("../views/IndexHost.vue"),
    children:[  
      {
        path: '/home',
        name: 'home',
        component: () => import("../views/home/IndexHome.vue")
        
      },
      {
        path: '/user',
        name: 'user',
        component: () => import('../views/user/IndexUser.vue')
        
      },
      {
        path: '/commodity',
        name: 'commodity',
        component: () => import('../views/commodity/IndexCommodity.vue')
        
      },
    ]
  },
  
]

         3.4 ，在主组件（IndexHost.vue）中定义tabber标签（底部标签）和定义路由容器

实现效果

基础框架已经搭好，下节讲述如何在页面中填充内容