黑马头条案例
0. 写在前面
- 案例源码: 黑马头条案例
- 之后又在项目中添加了记住滚动条与防抖,实现原理参考这篇博客:Vue记住滚动条位置 scrollBehavior + debounce
1. 创建并梳理项目结构
1.1 创建
vue create demo-toutiao
项目的初始配置:
1.2 components 和 views 文件夹
-
components
:如果某个组件不是通过路由来切换,是个可复用的组件,则放在 components 里。
-
views
:如果某个组件时通过路由来动态切换,则放在 views 里。
1.4 其他项目文件的初始化
-
清空
views
和components
文件夹 -
初始化
App.vue
文件:<template> <div id="app"> <h1>App 根组件</h1> </div> </template> <script> export default { name: 'App' } </script> <style lang="less" scoped> </style>
-
初始化
router/index.js
文件import Vue from 'vue' import VueRouter from 'vue-router' // 把 VueRouter 安装为插件 Vue.use(VueRouter) // 路由规则的数组 const routes = [] // 创建路由对象 const router = new VueRouter({ routes }) export default router
2.安装和配置 Vant 组件库
Vant 官方开发指南:Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)
点开左边快速上手
-
下载安装 (vue2 项目)
npm i vant@latest-v2 -S
-
引入组件(配置)
使用方式三,开发阶段增加体积无所谓,之后上线再进行优化
在
main.js
中加入下面的代码import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
-
浅试一下
在 App 根组件中放置一排按钮,查看效果
<template> <div id="app"> <h1>App 根组件</h1> <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>
3. 使用 Tabbar 组件开启路由模式
3.1 报错 Component name "Home" should always be multi-word
-
将组件名称命名为驼峰式
homeIndex
或者-
连接式home-index
-
如果不想修改组件名称,可以在
vue.config.js
文件中添加下面的内容,如果没有就新建修改完文件记得重启项目,(重新
npm run serve
)const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ lintOnSave:false })
3.2 修改 vant 组件的默认样式
- 审查元素 => 拿到选择器 => 再修改 只在当前组件生效
- 如果想要对所有使用该组件的样式生效 => 定制主题
4. 在 vue 项目使用 axios
-
在
src
目录下创建utils
文件夹,用来存放工具模块或者函数 -
在
src/utils
下创建request.js
模块import axios from 'axios' const request = axios.create({ // 指定请求的根路径 baseURL: 'http://www.escook.cn' }) export default request
-
我的代码:
request.js 不明白到底哪里不一样导致这个总是跨域然后拿不到数据,芭比q
import axios from 'axios' const request = axios.create({ // 指定请求的根路径 baseURL: 'http://www.escook.cn' }) export default request
-
案例代码:
import axios from 'axios' // 调用 axios.create() 函数,创建一个 axios 的实例对象,用 request 来接收 const request = axios.create({ // 指定请求的根路径 baseURL: 'https://www.escook.cn' }) export default request
5. 零零散散
- 在定义自定义属性的时候,如果是驼峰的形式,再绑定值得时候建议使用连字符
-
commentCnt: {
// 可以是多个可能的类型
type: [Number, String],
default: 0
}
<!-- 导入注册 ArticleInfo 组件 -->
<ArticleInfo :comment-cnt="item.comm_count"></ArticleInfo>
- 不是平级的 DOM 元素不能使用 v-if v-else
6. 上拉加载更多
List 列表 :Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)
当下拉,触发load 事件,请求第二页数据,同时 loading 的值变成 true。如果用户反复上拉加载,此时,不会多次调用 load 事件。因为 loading 为 true 的时候,不会反复触发 load 事件
loading
:是否正在加载下一页数据,如果 loading true则不会反复触发load事件,下一页数据请求结束后 要改为 falsefinished
:所有数据是否加载完毕,如果没有更多数据就要改成 true
load 默认开始就会触发一次,可以将 loading
的初始值改成true
,在 created
后再改回 false
,这样第一次进入页面就不会触发 load 事件。
7. 下拉刷新
触发refresh事件后 ,isLoading 自动被设置为 true,应当在事件对应的处理函数末尾将该值设置为false。
下拉刷新将请求到的数据拼接到头部
当数据请求完,禁用掉下拉刷新
8. 定制主题
Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)
原理:Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。
8.1 直接覆盖
-
将
main.js
中引入Vant
的css
文件改成less
文件,为了能够覆盖默认的less
变量// 导入并安装 Vant 组件库 import Vant from 'vant' import 'vant/lib/index.less'
-
在项目根目录的
vue.config.js
文件加入下面的配置选项在
package.json
中可以查看到 less-loader 的版本缺点:每次都要重启打包服务器,不怎么使用
css: { loaderOptions: { less: { // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。 lessOptions: { modifyVars: { // 直接覆盖变量 这里将该组件的背景颜色修改了 'nav-bar-background-color': '#84a6ca' } } } } }
8.2 通过 theme.less 定制主题
可以通过 less 文件覆盖(文件路径为绝对路径)
在 src
目录下新建 theme.less
文件
并且修改 vue.config.js 文件
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// 文件路径为绝对路径
hack: 'true; @import "";'
}
}
}
}
}
在 theme.less 文件中可以写less 语法来覆盖原有样式
如果报错 @nav-bar-background-color rule is missing block or ending semi-colon
是要在行后加分号哦
// 在 theme.less 文件中 覆盖 vant 官方的 less 变量值
@blue: #84a6ca;
// 覆盖 NavBar 的 less 样式
@nav-bar-background-color: @blue;
9. 打包发布
在 vue.config.js 中加入:publicPath: './',
,这样在打包项目之后,也可以通过 file 协议来打开index.html 来查看效果,默认是必须通过 http 或者 https 打开的。具体查看官方文档:配置参考 | Vue CLI (vuejs.org)