第一个Vant的demo

2024-04-24 14:20:59

添加Vant引用

如果想要在项目中使用Vant提供的组件

需要在Vue项目代码中添加Vant的引用

Vue项目的src/main.js文件中,添加引用代码如下

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

教程：

第二步

添加了上面的引用,当前Vue项目就可以使用Vant组件了

为了实时运行项目,我们先启动Vue项目,测试表示它正常运行

可以在idea提供的Terminal界面中编写如下代码

vue-home\demo-vant>npm run serve

图：

输入命令：npm run serve

启动后窗口：

启动后·：浏览器输入路径

打开浏览器

输入localhost:8080

进入移动端页面调试模式

以Google浏览器为例按F12进入调试模式后点击移动端调试即可

按钮组件

所有组件的演示代码,都可以从官网获取

地址：https://youzan.github.io/vant/v2/#/zh-CN/

在HomeView.vue文件中修改代码如下

图只是作为源码参考

<template>
<div class="home">
<van-button type="primary">ä¸»è¦æé®</van-button>
<van-button type="info">ä¿¡æ¯æé®</van-button>
<van-button type="default">é»è®¤æé®</van-button>
<van-button type="warning">è¦åæé®</van-button>
<van-button type="danger">å±é©æé®</van-button>
</div>
</template>

删除里边多余部分最后如下图所示

打开页面就能看到按钮的样式了

看到这个内容,表示当前Vant组件工作正常

如果没有看到效果

检查Vant组件的安装和引用

输入启动命令参考：

创建第一个Vant程序_晚安汐汐吖！的博客-CSDN博客

表单页面

登录作为移动端非常常见的界面

Vant表单是直接提供模板的,我们可以在官网找到表单链接直接使用

代码如下：

<template>
<div class="about">

<van-form @submit="onSubmit" @failed="onFailed">
<van-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>

<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
onSubmit(values) {
console.log('submit', values);
},
onFailed(errorInfo){
// 此方法会在页面表单提交失败时运行,参数errorInfo是错误信息
console.log(errorInfo);
}
},
};
</script>

注意@submit和@failed这两个事件的绑定关系

area省市区选择

先在views文件夹下创建AreaView.vue文件

编写代码如下：

<template>
<div>
<van-area title="标题" :area-list="areaList" />
</div>
</template>

<script>
const areaList = {
province_list: {
110000: '北京市',
120000: '天津市',
},
city_list: {
110100: '北京市',
120100: '天津市',
},
county_list: {
110101: '东城区',
110102: '西城区',
// ....
},
};

export default {
data(){
return {areaList};
}
}

</script>

定义路由设置在router包下的 index.js

const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/area',
name: 'area',
component: () => import('../views/AreaView.vue')
}
]

通过输入路径http://localhost:8080/area

访问省市区选择页面

只有少量数据

如果想要真实的数据,那么就需要在上面areaList数据中填入大量数据

但是这个工作量很大,个人实现非常困难,所以可以使用业界通用的一个省市区信息json对象

先安装全国省市区数据包

idea的Terminal界面输入如下命令

G:\vue-home\demo-vant>npm i @vant/area-data

如果有警告,直接无视

安装结果可能为

如果该安装成功,就可以添加全国省市区数据到项目中了

AreaView.vue代码中添加如下

<template>
<div>
<van-area title="标题" :area-list="areaList" @confirm="showArea" />
</div>
</template>

<script>

// 从全国省市区数据包中获得数据对象命名为areaList
import {areaList} from '@vant/area-data'
export default {
data(){
return {areaList};
},
methods:{
showArea(area){
console.log(area);
}
}
}

</script>

第一个Vant的demo相关推荐

java 基础api实现上传,上传文件到7牛云存储的java api一个简单的demo实现
最近在做一个项目,需要用到云存储,项目用的是七牛云.现在将项目过程中关于调用七牛云平台的java api来上传本地文件到七牛云空间的一个简单的demo展示给大家,希望对同样再用七牛云的童鞋们有所帮助. ...
我的第一个 react redux demo
最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如<深入浅出react和redux>,<React全栈++Redux+Flux+webpack+Bab ...
Unity3D引擎入门搭建一个FPS游戏Demo
目录一.unity3d简介(平台,应用范围,经典游戏) 二.界面,基础操作(界面,创建场景,灯光系统,摄像机,组件,脚本语言) 1.界面 2.基本操作三.demo制作(坐标系统,视角控制,移动,碰 ...
三维重建基本流程，搭建一个龙的demo
最近在学习三维重建的一些知识,作为一个小白,从入门到完成一次重建过程是一个需要花一段比较长时间的过程,在网上搜索各种资料时,会因为资料不全,导致无法理清楚逻辑,从而导致入门困难. 我主要是通过书和网上 ...
android 观察者模式的简单demo,一个简单的demo彻底搞懂观察者模式
介绍观察者模式也被称为发布-订阅(Publish/Subscribe)模式,它属于行为型模式的一种.观察者模式定义了一种一对多的依赖关系,一个主题对象可被多个观察者对象同时监听.当这个主题对象状态变 ...
基于 openGauss 的五子棋 AI 项目，openGauss 设计一个 AI 小 demo
目录 1 前言 2 方案意义 3 架构设计 4 数据表设计 5 代码结构 6 项目演示 7 总结 1 前言 openGauss 是一款全面友好开放的企业级开源关系型数据库.openGauss 采用木兰 ...
[Android]第一个Android软件/demo
[Android]第一个Android软件/demo 前期准备正文下载安装Android studio 开始第一个Android 应用问题1来了下载AVD 第二个问题来咯前期准备编译器:使 ...
一个VR游戏DEMO的开发历程是怎样的？
在博客中看到一篇PC Vr讲解很独到的文章希望大家可以喜欢出处:http://ms.csdn.net/geek/91921 VR现在似乎是个火热的话题,但在国内又毫无意外成了个看不清的迷局,就像充满 ...
一个爬虫的demo，requests，beatuifulsoup使用的
爬虫的demo,requests,beatuifulsoup import os,re import requests import random import time from bs4 impor ...

最新文章

热门文章