黑马头条案例（移动端）

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 文件：

• 初始化 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 :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事件，下一页数据请求结束后 要改为 false
• finished：所有数据是否加载完毕，如果没有更多数据就要改成 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)