Vant实践之上拉加载及下拉刷新

最新推荐文章于 2024-09-25 16:11:03 发布

奇舞周刊

最新推荐文章于 2024-09-25 16:11:03 发布

阅读量1.2k

点赞数 24

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/135143813

版权

这篇博客介绍了如何在Vue项目中使用Vant组件库，包括安装、按需引入Vant和Vue Router，以及如何实现下拉刷新和上拉加载功能。还涉及到axios的使用和自定义组件的创建，如van-tabbar和图文混排单元格组件。

摘要由CSDN通过智能技术生成

亲爱的小伙伴们，《奇舞精选》正在参加掘金年度人气创作者评选活动。请您动动发财的小手，帮《奇舞精选》投上宝贵的两票。我们也会再接再厉创作出更加优质的技术文章！

image.png

Vant组件

简介

Vant 是有赞前端团队开源的一套轻量、可靠的移动端组件库。

安装

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue3 项目，安装最新版 Vant
npm i vant

引入Vant组件

基础用法：

例：

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

自动按需引入请参考vant官方指导意见：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

Vue Router组件

安装

在现有项目中使用Vue Router 时，可以通过 npm 进行安装：

npm install vue-router@4

引入Vue Router组件

1、在src目录下创建一个文件夹views，然后在内创建两个vue页面，分别为AppHome和AppUser，用作路由跳转；

2、在src目录下创建一个文件夹router，然后在文件夹内创建一个router.js 文件。然后在router.js文件内添加如下代码：

import { createRouter, createWebHistory  } from 'vue-router'
import AppHome from '@/views/AppHome'
import AppUser from '@/views/AppUser'
import AppClassify  from '@/views/AppClassify'

const routes =[
     { 
        path: '/', 
        component: AppHome
     },
    {
        path: '/appClassify',
        name: 'appClassify',
        component: AppClassify
    },
     {
         path:'/appUser',
         name:'appUser',
         component: AppUser 
     }
]

const router =createRouter({
    history:createWebHistory(),
    r