黑马头条案例(移动端)

黑马头条案例

  • 0. 写在前面
  • 1. 创建并梳理项目结构
    • 1.1 创建
    • 1.2 components 和 views 文件夹
    • 1.4 其他项目文件的初始化
  • 2.安装和配置 Vant 组件库
  • 3. 使用 Tabbar 组件开启路由模式
    • 3.1 报错 `Component name "Home" should always be multi-word`
    • 3.2 修改 vant 组件的默认样式
  • 4. 在 vue 项目使用 axios
  • 5. 零零散散
  • 6. 上拉加载更多
  • 7. 下拉刷新
  • 8. 定制主题
    • 8.1 直接覆盖
    • 8.2 通过 theme.less 定制主题
  • 9. 打包发布

0. 写在前面

  • 案例源码: 黑马头条案例
  • 之后又在项目中添加了记住滚动条与防抖,实现原理参考这篇博客:Vue记住滚动条位置 scrollBehavior + debounce

1. 创建并梳理项目结构

1.1 创建

vue create demo-toutiao

项目的初始配置

黑马头条案例(移动端)_第1张图片

1.2 components 和 views 文件夹

黑马头条案例(移动端)_第2张图片

  • components

    如果某个组件不是通过路由来切换,是个可复用的组件,则放在 components 里。

  • views

    如果某个组件时通过路由来动态切换,则放在 views 里。

1.4 其他项目文件的初始化

  • 清空 viewscomponents 文件夹

  • 初始化 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 中引入 Vantcss 文件改成 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)

你可能感兴趣的:(Vue2,vue.js,javascript,npm)