第一个Vant的demo

添加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">
    <!--
      @submit是vant组件提供的Event(事件),在表单提交成功时触发,绑定的方法在下面的js中
      @failed是vant组件提供的Event(事件),在表单提交失败时触发,绑定的方法在下面的js中
      要想知道,当前组件都有呢些属性或事件,可以查询官网文档中的api和event列表
     -->
    <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>