“vue项目之:夕夕头条“

最新推荐文章于 2024-05-17 14:32:46 发布

PanCc220

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量194

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_61324100/article/details/131076441

版权

文章目录

- 项目介绍

项目介绍

该项目基于vue-cli快速创建vue工程化项目,并结合使用vant组件库来完成。

项目展示:

在这里插入图片描述

1.搭建项目

1.使用vue-cli创建vue项目

在这里插入图片描述

2.选择一个预设,这里选Manually select features(手动选择功能)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVGS6Tmq-1686057530118)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142034030.png)]$

3.选择项目所需功能

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QRN63Bty-1686057530118)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142236526.png)]$

4.选择项目使用的vue版本

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYsILOc6-1686057530118)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142311375.png)]$

5.选择n,不需要用路由历史模式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1WD5zlgk-1686057530119)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142333327.png)]$

6.选择css预处理器,这里选择less

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDNMIIo7-1686057530119)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142356975.png)]$

7.选择标准的Eslint配置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngBekk5J-1686057530119)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142428262.png)]$

8.选择Lint on save

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vj0mvGc4-1686057530119)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142501686.png)]$

9.将Babel,Eslint文件放在单独的配置文件中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXIYzfKo-1686057530119)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142541239.png)]$

10.vue项目创建成功

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G6mMCOI4-1686057530120)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142649150.png)]$

2.项目准备

1.Vscode中打开项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Byy2j3Pm-1686057530120)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606142832228.png)]$

2.安装vant组件库

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLFBMjwv-1686057530120)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606143228491.png)]$

3.在main.js中引入vant组件库

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sfi27gFF-1686057530121)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606143633668.png)]$

4.初始化项目结构,使用vant组件库

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s9ORrEgQ-1686057530121)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606144132356.png)]$

5.运行npm run serve,引入vant组件库成功

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNVwrfhX-1686057530121)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606144227205.png)]$

3.创建项目相关组件

1.在views文件夹下,创建Home.vue,User.vue

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tS6nghZq-1686057530121)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606144740484.png)]$

views文件夹下存放的vue组件,是需要通过路由来控制的组件

发现报错提示组件名称错误:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgfsvUmv-1686057530121)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606151042986.png)]$

在.eslintrc.js中,自定义规则

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRyOKU9h-1686057530122)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606151214451.png)]$

2.在App根组件中,添加路由占位符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDBYzoVn-1686057530122)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606145425403.png)]$

3.选择Vant官网的,选择导航组件->Tabbar标签栏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UU0HBxY-1686057530122)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606145626773.png)]$

复制使用Tabbar标签栏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTzCDK5j-1686057530122)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606145738443.png)]$

查看效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lEbXWzs9-1686057530123)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606145929443.png)]$

4.更改"我的"图标,Vant官网中选择基础组件->icon图标

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cPtW7p2h-1686057530123)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606150131001.png)]$

更改icon的属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9MT7RqT-1686057530123)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606150257610.png)]$

查看更改后的效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yrm9fCIW-1686057530123)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606150326249.png)]$

5.设置路由模式

给外层(van-tabbar)添加route属性，内层(van-tabbar-item)添加to属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FaUR9Ie8-1686057530123)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606150639035.png)]$

在router->index.js中,填写对应的路由规则

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQiP4mE4-1686057530124)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606152101682.png)]$

4.User组件

<template>
  <div class="user-container">
    <!-- 用户基本信息面板 -->
    <div class="user-card">
      <!-- 用户头像、姓名 -->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img src="../../assets/logo.png" 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="passed" title="服务" is-link />
      <van-cell icon="photo-o" title="朋友圈" is-link />
      <van-cell icon="coupon-o" title="卡包" is-link />
      <van-cell icon="smile-o" title="表情" is-link />
      <van-cell icon="setting-o" title="设置" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>

export default {
  name: 'User',
  data() {
    return {
      page: 1,
      limit: 5
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  .user-card {
    background-color: #66CCCC;
    color: white;
    padding-top: 20px;
    .van-cell {
      background: #66CCCC;
      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>

5.Home组件

1.使用Vant组件库的导航栏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDWllBZx-1686057530124)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606152754141.png)]$

(1)复制到Home组件中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzVSLO4v-1686057530124)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606153011291.png)]$

这里我们的项目只需要用到title属性

(2)设置Header头部区域的样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Go3NszT4-1686057530124)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606154214817.png)]$

查看效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JZTsGnCL-1686057530124)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606154051577.png)]$

2.发起axios请求获取后端数据

(1)安装axios

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R760WdVx-1686057530125)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606155303047.png)]$

(2)封装request.js模块,配置好axios请求(src->utils->request.js)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pqpZ2ASc-1686057530125)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606155846975.png)]$

(3)封装API接口(src->api->articleApi.js),向外按需导出API函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hCnlQMpA-1686057530125)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606160553119.png)]$

(4)Home组件中methods封装获取文章列表的方法,created调用该方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DvWr7izC-1686057530125)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606161608471.png)]$

3.创建使用ArticleInfo组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9UAFUbX-1686057530126)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606161917767.png)]$

(1)初始化ArticleInfo组件

<template>
  <div>
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>文章的标题噢</span>
          <!-- 单张图片 -->
          <img src="https://www.escook.cn/vuebase/pics/1.png" alt="" class="thumb">
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>作者 &nbsp;&nbsp; 0评论 &nbsp;&nbsp; 发布日期</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" />
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ArticleInfo'
}
</script>

<style lang="less" scoped>
  .label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumb {
  // 矩形黄金比例：0.618
  width: 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>

(2)Home组件中导入注册并使用ArticleInfo组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RiAa4C1-1686057530126)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606162454896.png)]$

(3)列表渲染ArticleInfo组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lYUINOEk-1686057530126)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606162921413.png)]$

(4)ArticleInfo组件中封装props属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5FBTM7h-1686057530126)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606163745648.png)]$

(5)Home组件中绑定属性传值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycCrD8v9-1686057530126)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606164145558.png)]$

(6)ArticleInfo组件中渲染数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06nwZSRd-1686057530127)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606164654327.png)]$

4.上拉加载更多

使用Vant组件库的List列表

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ra4OtAHf-1686057530127)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606164904910.png)]$

(1)复制使用vant-list组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JUwUHIQP-1686057530127)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606165426380.png)]$

哪个组件需要使用List,就将它放到List组件内(ArticleInfo需要)

(2)实现上拉加载更多

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2LLY5nOz-1686057530127)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606170938356.png)]$

5.下拉刷新

List组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果。

使用Vant组件库的pullRefresh组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p5DL9KfD-1686057530128)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606171151917.png)]$

(1)复制使用vant-pull-refresh组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cc5J6U6p-1686057530128)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606171430203.png)]$

vant-pull-refresh组件包裹van-list组件

(2)实现下拉刷新

绑定disabled属性,让他的值等于finished的值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wnehe4q-1686057530128)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606172226019.png)]$

disabled:是否禁用滚动加载

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiUqznqk-1686057530128)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606172913947.png)]$

6.vant主题定制

在vant里边定制主题核心原理就是less变量的覆盖。

(1)把main.js中import 'vant/lib/index.css' 改为 import 'vant/lib/index.less'

在这里插入图片描述

(2)项目根目录中创建vue.config.js,然后进行配置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9vZaVQO-1686057530129)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606173636259.png)]$

(3).src目录下,创建theme.less文件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNAUL4cM-1686057530129)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606173721820.png)]$

7.保存滚动条位置

(1)App.vue中缓存 Home组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kn6WG5cv-1686057530129)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606174524045.png)]$

(2)路由规则中添加meta

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-essZDNhA-1686057530129)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606174911856.png)]$

(3)路由对象中配置scrollBehavior()

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-th9GuRmN-1686057530130)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606175012440.png)]$

(4)Home中的methods添加recordTopHandler()

先安装lodash

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83WSxddY-1686057530130)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606175235472.png)]$

然后实现recordTopHandler()

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwfmcLIL-1686057530130)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606175538688.png)]$

滚动条滚动利用lodash的防抖函数优化性能

(5)页面激活时,监听页面滚动事件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XY6O4UTp-1686057530130)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230606175840216.png)]$