vantUI介绍
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">></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 =