黑马头条案例（基于vue2）

最新推荐文章于 2025-04-01 21:05:54 发布

俗世没有清欢

最新推荐文章于 2025-04-01 21:05:54 发布

阅读量3.2k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_53767416/article/details/128143297

版权

本文档记录了使用Vue2创建黑马头条案例的过程，包括项目初始化、首页制作、 vant组件的安装配置、底部Tabbar切换、首页头部和文章列表的实现，以及上拉加载更多和下拉刷新功能的集成。详细介绍了每个步骤的操作方法和遇到的问题解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目标：

目的：自己做记录，记录制作过程以及遇到的问题。内容来自b站的up主：黑马程序员（up主名字）的黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端学习....(视频名称部分)。

效果展示：

二、开始制作

（一）、初始化操作：

（1）创建项目

1. 打开一个文件夹，在所处文件夹中打开终端（将鼠标放在文件夹名字那一栏的空白处（如图所示），点击一下，输入cmd回车，再按回车打开终端）

2. 在终端中输入：vue create toutiao，开始进行项目的创建,选择如下选项（多选选项：点击空格添加“*”号是选择，回车进入下一步，通过下上键进行选项切换）

History路由需要和后端配合使用，兼容性较差。最后一个的意思是存不存为一个预设，存不存都无所谓。等它加载成（如图）这样就是创建好了。然后关闭终端，用vscode打开我们创建的文件。在vscode中打开终端。

3. 图上这两个文件夹的区别：它们两个都是放组件的，如果某个组件是通过路由来进行动态切换的，这种组件放在views里面；如果不是通过路由来切换的，是一个可复用的组件，放在components里面

因为它会自动生成代码，打开app.vue，ctrl+A全选删除。Views文件夹中自动生成了两个组件，不需要，直接右键删除，components下面的helloworld也不需要，删除。将router文件夹里面的index.js里routes的数组清空，然后把导入的home组件也删除

更改以后的index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
// 把VueRoter安装为Vue的插件
Vue.use(VueRouter)
// 路由规则的数组
const routes = []
// 创建路由实例对象
const router = new VueRouter({
  routes
})
export default router

打开终端，npm run serve，运行，按住ctrl点击local对应的网址，打开网页，F12进入，以移动设备展示

4. 安装和配置vant组件：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io) （如果直接在浏览器输入的，要记得选择适用于vue2的那个）。它提供了很多组件，很适合移动端的开发

4.1 进行安装

选择命令进行安装。点击加号新建一个终端，在新的终端里面复制命令（鼠标右键即可在终端中复制）。如果出现了以下情况的报错：

输入 npm i vant@latest-v2 -S --legacy-peer-deps （legacy的意思：遗产/（软件或硬件）已过时但因使用范围广而难以替代的；而npm install xxxx --legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装；它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题，以npm v3-v6的方式去继续执行安装操作。所以其实该命令并没有真的解决冲突，而是忽略了冲突，以“过时”（v3-v6）的方式进行下载操作。）

4.2 进行配置安装了之后继续看文档，看如何进行配置。

因为组件很多，但不是每一个我们都需要，如果我们都打包体积就会很大，出于性能上考虑，方法一更好。但由于方法一比较麻烦复杂，所以在开发阶段，由于不需要考虑体积的问题，我们通常采用方法三。在发布阶段，可以直接把vant抽出去（将vant优化掉）。

注意：在同一个文件中，不要重复导入，复制没有的粘贴即可（import必须放在头部）

更改之后的main.js:

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

5. 实现底部Tabbar的切换：

要实现这两个组件的切换，首先我们需要这两个组件。所以（1）创建两个组件的页面，那这两个组件我们应该放在哪个目录（components或views）下呢？放在views下，因为这两个页面都是通过路由来加载的。所以在views文件夹下新建User文件夹（在文件夹里面创建User.vue）和Home文件夹(在文件夹里面创建Home.vue）,注意等级关系，不要放错位置将两个的基础部分都写好。