Vue+vant仿有客页面

vantUI介绍

vaniui

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

项目
前端地址：https://yk.52kfw.cn/index.html#/home

后端地址：https://yk.52kfw.cn/admin.html#/manage

接口文档：https://api.52kfw.cn/api.html

项目搭建

vue环境

vantui环境

Vue 2 项目，安装 Vant 2：
npm i vant -S 或者 yarn add vant

在main.js文件下导入vantui（也可以按需导入）

//导入vantui组件库 一次性导入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

路由删除

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
  routes
})
export default router

App.vue重构

<template>
  <div id="app">
  <!-- 路由的出口 -->
    <router-view/>
  </div>
</template>

<style lang="less">
  /*样式初始化*/
  @import "assets/reset.less";
</style>

第一个页面-定位（固定数据）

数据暂时都是死的后期使用接口变活

定位-头部

在views目录下新建第一个Home.vue
Home.vue

<template>
  <div>
    <!-- 定位页面的布局 vantui -->
    <van-nav-bar
            class="nav-top-bar"
            fixed
            :title="address"
            left-text="有客"
            right-text="登录 | 注册"
            @click-left="onClickLeft"
            @click-right="onClickRight"
    />
  </div>
</template>
<script>
  export default {
     
    name: 'Home',
    data() {
     
      return {
     
        address: '如皋党校', // 后期这里是用户的定位地址
      }
    },
    methods:{
     
      onClickLeft(){
     
      },
      onClickRight(){
     
      }
    }
}
</script>

<style lang="less">
  div.nav-top-bar {
     
    background-color:#3190e8;
  .van-nav-bar__text, .van-nav-bar__title, .van-icon-arrow-left {
     
    color: #fff;
    font-size: 16px;
    }
  }
</style>

路由添加

import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

yarn serve

用户定位城市

 <!--用户定位城市-->
    <div class="location">
      <div class="top">
        <span>当前定位城市：</span>
        <span>定位不准时，请在城市列表中选择</span>
      </div>
      <div class="bottom">
        <span class="address">南通</span>
        <span class="arrow">&gt;</span>
      </div>
    </div>

.location {
   
    margin-top: 46+10px;
    .top, .bottom {
   
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #e4e4e4;
      border-bottom: 2px solid #e4e4e4;
    }
    .bottom {
   
      font-size: 20px;
      .address {
   
        color: #3190e8;
      }
      .arrow {
   
        /*移动端 小图标的安全区域，也称之为被点击的区域 40px*/
        width: 40px;
        line-height: 30px;
        text-align: center;
        color: #999;
      }
    }
  }

热门城市

<!-- 热门城市 -->
    <div class="city">
      <h2 class="title">热门城市</h2>
      <ul class="list clearfix">
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
      </ul>
    </div>

.city {
   
        margin-top: 10px;
        border-top: 2px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        .title {
   
            padding: 10px;
            border-bottom: 1px solid #e4e4e4;
            > span {
   
                font-size: 12px;
            }
        }
        .list {
   
            padding: 0;
            margin: 0;
            list-style: none;
            font-style: normal;
            text-decoration: none;
            border: none;
            color: #333;
            font-weight: 400;
            font-family: Microsoft Yahei;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            .item {
   
                float: left;
                text-align: center;
                border-bottom: .025rem solid #e4e4e4;
                border-right: .025rem solid #e4e4e4;
                width: 25%;
                height: 1.75rem;
                font: .6rem/1.75rem Microsoft YaHei;
                /* 溢出加省略号... */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .hot {
   
                color: #3190e8 !important;
            }
        }
    }

这个城市布局不是我们想要的样式，在App.vue里加入，内减盒子设置

 *{
   
    box-sizing: border-box;
  }

所有城市

<div class="city">
      <h2 class="title">A <span>（按字母排序）</span></h2>
      <ul class="list clearfix">
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
        <li class="item">上海</li>
      </ul>
    </div>

第一个页面-定位（从接口取数据）

接口地址
在src目录下新建api目录用来专门负责接口部分
下载axios（不做演示）

yarn add axios

api目录下新建 request.js

import axios from 'axios';

//自定义实例默认值
//写接口前缀
const instance = axios.create({
   
    baseURL: 'https://api.52kfw.cn'
});

export default instance;

新建主页相关api / home.js

/* 网络请求 */
import request from './request.js'

function requestCityByType(type) {
   
    /*底层实现*/

}

export async function getUserLocation() {
   
    let url = '/v1/cities?type=guess';
    let resonse = await request.get(url);
    return resonse.data;
}

export async function getHotCity() {
   
    let url = '/v1/cities?type=hot';
    let resonse = await request.get(url);
    return resonse.data;
}

export async function getAllCity() {
   
    let url = '/v1/cities?type=group';
    let resonse =