Vue:简单运用vant组件

创建一个新的项目

在新建终端中输入：npm install vant --save 与 npm install vue-router

修改main.js内容：

import { createApp } from 'vue'

// import './style.css'

import App from './components/test.vue'

import Vant from 'vant'

import 'vant/lib/index.css'

import router from './router.js'

const app=createApp(App)

app.use(Vant)

app.use(router)

app.mount('#app')

在src目录下新建router.js文件：

import { createRouter,createWebHashHistory, createWebHistory } from "vue-router";

import Home from './components/Home.vue'

const router=createRouter({

    history:createWebHistory(),    //createWebHistory()带#号的

    routes:[

        {path:'/home',component:Home},

    ]

})

export default router

在src/components路径下新建Vantui.vue文件：

<template>

    <div>

        <van-button type="primary">主要按钮</van-button>

        <van-button>默认按钮</van-button>

        <!-- round 圆角按钮 -->

        <van-button type="success" round>成功按钮</van-button>

        <van-button type="warning">警告按钮</van-button>

        <van-button type="danger">危险按钮</van-button>

        <!-- loading 加载状态 -->

        <van-button type="primary" loading loading-text="加载中"></van-button>

        <!-- vant组件图标(去vant ui官网查找) -->

        <van-button icon="circle">基础图标</van-button>

        <van-button icon="like">爱心</van-button>

        <van-button :icon="vantimages"></van-button>

        <!-- size属性 控制按钮大小 -->

        <van-button icon="vantimages" size="mini"></van-button>

        <van-button :icon="vantimages" url="https://www.baidu.com">百度</van-button>

        <!-- to="" 实现router路由跳转 -->

        <van-button icon="circle" to="/home">基础图标</van-button>

        <van-tabs v-model:active="activeIndex">

            <van-tab title="基本信息">基本信息内容</van-tab>

            <van-tab title="行为记录">行为记录内容</van-tab>

            <van-tab title="交易明细">交易明细内容</van-tab>

        </van-tabs>

        <van-form @submit="onSubmit">

            <!-- :rules="[{required:true,message:'请输入用户名'}]"  数值为空时，红字提示 -->

            <van-field v-model="username" label="用户名" :rules="[{required:true,message:'请输入用户名'}]"></van-field>

            <van-field v-model="password" label="密码"></van-field>

            <van-button native-type="submit">登录</van-button>

        </van-form>

        <!-- van-grid-item 作为每个网格元素的容器 -->

        <van-grid>

            <!-- dot 图标右上角红点 -->

            <van-grid-item icon="wap-home-o" text="首页" dot></van-grid-item>

            <!-- badge 图标右上角徽标，显示未读消息数量 -->

            <van-grid-item icon="chat-o" text="聊天" :badge="num"></van-grid-item>

            <van-grid-item icon="phone-o" text="电话"></van-grid-item>

            <van-grid-item icon="user-o" text="我的"></van-grid-item>

        </van-grid>

        <!-- :column-num="3" 规定一行几列 -->

        <van-grid :column-num="3">

            <!-- src使用assets文件夹中会引用失败，应该引用pubilc文件夹中新建images文件夹的图片 -->

            <van-grid-item><van-image src="/images/testimage.PNG"></van-image></van-grid-item>

            <van-grid-item><van-image src="/images/testimage.PNG"></van-image></van-grid-item>

            <van-grid-item><van-image src="/images/testimage.PNG"></van-image></van-grid-item>

        </van-grid>

        <router-view></router-view>

    </div>

</template>

<script>

import vueimage from '../assets/vue.svg'

    export default {

        data() {

            return {

                vantimages:vueimage,

                activeIndex:0,

                username:'',

                password:'',

                num:11

            }

        },

        methods:{

            onSubmit(){

                console.log("单击时打印");

            }

        }

    }

</script>

<style lang="scss" scoped>

</style>

实现效果图：