创建项目: vue create demo-toutiao ，需要勾选router模块，但不适用history模式。还需要勾选Eslint来约束代码风格

关于文件夹: components文件夹和views文件夹的区别，components存放可复用的或者使用在页面内的自定义组件，views文件夹存放的是通过路由控制的组件。

整理项目: 修改App.vue代码，修改路由配置代码，删除components和views里的所有组件

<!-- App.vue -->
<template><div id="app"></div>
</template><script>
export default {}
</script><style lang="scss">
</style>

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由规则
const routes = []
// 创建路由对象
const router = new VueRouter({routes
})export default router

1. 初始化

1.1 安装Vant组件库

vant官网: 点我进入

安装：npm i vant@latest-v2 -S

引入组件: vant提供了三种引入方式，推荐使用 babel-plugin-import 的插件去按需自动引用。但是本次开发我们使用另一种方案，全部引入的方案(为了开发方便，打包时不能这样做会增加项目体积)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入vant
import Vant from 'vant'
import 'vant/lib/index.css'Vue.config.productionTip = false
// 安装
Vue.use(Vant)new Vue({router,render: h => h(App)
}).$mount('#app')

2 使用tabbar并开启路由

1. 在views中创建 Home.vue和User.vue 这两个是页面性质的被路由来操控是否显示所以在 views

2. 修改App.vue添加tabbar

<template><div id="app"><!-- 路由占位符 --><router-view></router-view><!-- tabbar --><van-tabbar route><van-tabbar-item icon="home-o" replace to="/home">首页</van-tabbar-item><van-tabbar-item icon="user-o" replace to="/user">我的</van-tabbar-item></van-tabbar></div>
</template><script>
export default {data () {return {}}
}
</script><style lang="scss">
</style>

3.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import User from '@/views/User'Vue.use(VueRouter)// 路由规则
const routes = [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/user', component: User }
]
// 创建路由对象
const router = new VueRouter({routes
})export default router

4. 绘制我的页面

<template><div class="user-container"><!-- 用户基本信息面板 --><div class="user-card"><!-- 用户头像、姓名 --><van-cell><!-- 使用 title 插槽来自定义标题 --><template #icon><img src="" alt="" class="avatar"></template><template #title><span class="username">用户名</span></template><template #label><van-tag color="#fff" text-color="#007bff">申请认证</van-tag></template></van-cell><!-- 动态、关注、粉丝 --><div class="user-data"><div class="user-data-item"><span>0</span><span>动态</span></div><div class="user-data-item"><span>0</span><span>关注</span></div><div class="user-data-item"><span>0</span><span>粉丝</span></div></div></div><!-- 操作面板 --><van-cell-group class="action-card"><van-cell icon="edit" title="编辑资料" is-link /><van-cell icon="chat-o" title="小思同学" is-link /><van-cell icon="warning-o" title="退出登录" is-link /></van-cell-group></div>
</template><script>
export default {name: 'User'
}
</script><style lang="scss">
.user-container {.user-card {background-color: #007bff;color: white;padding-top: 20px;.van-cell {background: #007bff;color: white;&::after {display: none;}.avatar {width: 60px;height: 60px;background-color: #fff;border-radius: 50%;margin-right: 10px;}.username {font-size: 14px;font-weight: bold;}}}.user-data {display: flex;justify-content: space-evenly;align-items: center;font-size: 14px;padding: 30px 0;.user-data-item {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 33.33%;}}
}
</style>

3.navbar的使用

<!-- fixed 就是 :fixed="true" 的缩写 -->
<!-- fixed 是否固定顶部，placeholder 是否生成占位符 -->
<van-nav-bar title="今日头条" fixed placeholder/>

修改navbar的样式

  .home-container{::v-deep .van-nav-bar{background-color: #C00;}::v-deep .van-nav-bar__title{color: #FFF;}}

在scss中使用 /deep/报错，只能使用 ::v-deep 代替

4.获取文章列表

4.1 封装Axios

创建文件 src/utils/request.js

import axios from 'axios'const request = axios.create({baseURL: 'https://www.escook.cn'
})export default request

4.2 获取文章列表

在Home组件中获取文章列表

import request from '@/utils/request'export default {name: 'Home',data () {return {// 当前页数page: 1,// 每页显示多少条limit: 15}},created () {this.initArticleList()},methods: {async initArticleList () {const { data: res } = await request.get('/articles', {params: {_page: this.page,_limit: this.limit}})console.log(res)}}
}

4.3 封装articleApi模块

创建文件 src/api/ArticleApi.js

import request from '@/utils/request'// 按需导出
export const getArticleListApi = function (_page, _limit) {return request.get('/articles', {params: {_page,_limit}})
}

修改Home.vue的代码

import { getArticleListApi } from '@/api/ArticleApi'export default {name: 'Home',data () {return {// 当前页数page: 1,// 每页显示多少条limit: 15}},created () {this.initArticleList()},methods: {async initArticleList () {const { data: res } = await getArticleListApi(this.page, this.limit)console.log(res)}}
}

4.4 封装 ArticleInfo组件

ArticleInfo组件用于显示每一条文章的预览。

创建 components/article/ArticleInfo.vue

<template><div class="ArticleInfo-Container">Article Info</div>
</template><script>
export default {name: 'ArticleInfo'
}
</script><style lang="scss" scoped></style>

在Home中使用

<template><div class="home-container"><!-- 头部标题 --><van-nav-bar title="今日头条" fixed placeholder/><!-- 每个文章条目 --><ArticleInfo v-for="item in artlist" :key="item.art_id"></ArticleInfo></div>
</template><script>
// 导入API
import { getArticleListApi } from '@/api/ArticleApi'
// 导入组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'export default {name: 'Home',data () {return {// 当前页数page: 1,// 每页显示多少条limit: 15,// 文章列表artlist: []}},created () {this.initArticleList()},methods: {async initArticleList () {const { data: res } = await getArticleListApi(this.page, this.limit)this.artlist = res}},components: {ArticleInfo}
}
</script>

美化组件

<template><div class="ArticleInfo-Container"><van-cell><!-- 标题区域的插槽 --><template #title><div class="title-box"><!-- 标题 --><span>{{title}}</span><!-- 单张图片 --><img alt="" class="thumb" v-if="cover.type === 1" :src="cover.images[0]"></div><!-- 三张图片 --><div class="thumb-box" v-if="cover.type === 3"><img alt="" class="thumb" v-for="(item, index) in cover.images" :key="index" :src="item" ></div></template><!-- label 区域的插槽 --><template #label><div class="label-box"><span>{{autName}} &nbsp;&nbsp; {{commCount}}评论 &nbsp;&nbsp; {{pubdate}}</span><!-- 关闭按钮 --><van-icon name="cross" /></div></template></van-cell></div>
</template><script>
export default {name: 'ArticleInfo',props: {// 标题title: {type: String,default: ''},// 作者autName: {type: String,default: ''},// 评论数量commCount: {type: [String, Number],default: 0},// 时间pubdate: {type: String,default: ''},// 图片数据cover: {type: Object,default () {return {}}}}
}
</script><style lang="scss" scoped>
.label-box {display: flex;justify-content: space-between;align-items: center;
}
.thumb {// 矩形黄金比例：0.618width: 113px;height: 70px;background-color: #f8f8f8;object-fit: cover;
}.title-box {display: flex;justify-content: space-between;align-items: flex-start;
}.thumb-box {display: flex;justify-content: space-between;
}
</style>

在Home.vue中传递article对象

    <!-- 每个文章条目 --><ArticleInfov-for="item in artlist":key="item.art_id":title="item.title":aut-name="item.aut_name":comm-count="item.comm_count":pubdate="item.pubdate":cover="item.cover"></ArticleInfo>

定义props时，type可以接受一个数组，表示该参数可以接受多种类型。如果组件中props的参数名是驼峰命名，在使用时可以使用 - 链接

4.5 上拉加载更多和下拉刷新

<template><div class="home-container"><!-- 头部标题 --><van-nav-bar title="今日头条" fixed placeholder/><!-- 下拉刷新 --><van-pull-refresh v-model="isLoading" @refresh="onRefresh"><!-- 上拉加载组件 --><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><!-- 每个文章条目 --><ArticleInfov-for="item in artlist":key="item.art_id":title="item.title":aut-name="item.aut_name":comm-count="item.comm_count":pubdate="item.pubdate":cover="item.cover"></ArticleInfo></van-list></van-pull-refresh></div>
</template><script>
// 导入API
import { getArticleListApi } from '@/api/ArticleApi'
// 导入组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'export default {name: 'Home',data () {return {// 当前页数page: 1,// 每页显示多少条limit: 15,// 文章列表artlist: [],// 首次进来时会先加载第一页数据，所以默认值应该为trueloading: true,finished: false,// 下拉刷新是否正在加载isLoading: false}},created () {this.initArticleList()},methods: {onRefresh () {// 实际上下拉刷新也是获取下一页数据只是将新内容拼接到头部this.page++this.initArticleList(true)},/*** 加载更多文章*/onLoad () {// 当滚动到底部时会切换为加载中状态,并将loading变量设置为true// 加载完毕后我们需要手动将 loading 设置为false.如果加载了全部的数据，需要将finished设置为truethis.page++this.initArticleList()},/*** 获取文章列表*/async initArticleList (isRefresh) {const { data: res } = await getArticleListApi(this.page, this.limit)// 是否是下拉刷新if (isRefresh) {this.artlist = [...res, ...this.artlist]// 修改下拉刷新状态this.isLoading = false} else {this.artlist = [...this.artlist, ...res]}// 修改上拉加载状态this.loading = false// 判断是否加载了全部数据if (res.length === 0) {this.finished = true}}},components: {ArticleInfo}
}
</script>

注意下拉刷新的实际逻辑，并不是将分页设置成1页，依然将页数加一，只是将新的数据拼接在旧数据的前面。

Vue笔记(8) - 案例相关推荐

vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
前端自学Vue笔记干货（第一版，持续更新中~~~）
学习笔记 Vue笔记 nprogress使用 npm i nprogress -S 基本上都是在对axios进行二次封装.前置守卫路由或者封装成工具函数的.js文件中用到 import nprogre ...
Vue笔记-尚硅谷-Alex
Vue笔记 Vue简介官网英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 介绍与描述动态构建用户界面的渐进式 JavaScript 框架 ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
oracle 百万记录 cache,学习笔记:通过案例深入学习In-Memory Database Cache 总结配置过程...
天萃荷净详细记录关于In-Memory Database Cache配置方法与使用案例一.Oracle数据库创建相关用户和权限 1.创建timesten用户 store information a ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
vue笔记（一）基本使用、数据检测
vue 官网 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 一.基本使用二.数据检测一.Vu ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...

Vue笔记(8) - 案例

1. 初始化

1.1 安装Vant组件库

2 使用tabbar并开启路由

3.navbar的使用

4.获取文章列表

4.1 封装Axios

4.2 获取文章列表

4.3 封装articleApi模块

4.4 封装 ArticleInfo组件

4.5 上拉加载更多和下拉刷新

Vue笔记(8) - 案例相关推荐

最新文章

热门文章

Vue笔记(8) - 案例

1. 初始化

1.1 安装Vant组件库

2 使用tabbar并开启路由

3.navbar的使用

4.获取文章列表

4.1 封装Axios

4.2 获取文章列表

4.3 封装articleApi模块

4.4 封装 ArticleInfo组件

4.5 上拉加载更多 和 下拉刷新

Vue笔记(8) - 案例相关推荐

最新文章

热门文章

4.5 上拉加载更多和下拉刷新