Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系(京东到家的物流模式)

目录

项目首页开发

项目准备✌️

样式开发👍

防抖👊

底部横条✌️

登陆注册功能开发

样式编写 👐

路由守卫实现基础登录校验功能☝️

使用 axios 发送登录 Mock 请求👈

请求函数的封装🙌

通过代码拆分增加逻辑可维护性👏

推荐整理分享Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系(京东到家的物流模式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:京东到家入口在哪里,京东到家入口在哪里,京东到家简介和商业模式,京东到家的优势在哪,京东到家的优势在哪,京东到家简介和商业模式,京东到家是o2o模式吗,京东到家是o2o模式吗,内容如对您有帮助，希望把文章链接给更多的朋友！

本项目的源代码在文章末尾哦

我们先看一下在本文中我们这个项目要做的页面，分别是首页，登录和注册页面：

项目首页：

登录页面：

注册页面和登录页面相似，这里就不展示了。在本文中我们会完成京东到家项目首页和登录注册页面的样式开发，其中会用到 element-plus 组件库，登录注册会使用 axios 发送 Mock 请求来实现，贴近真实项目开发。

我们通过脚手架已经构建好了项目，如果还不会怎么搭建vue3项目的同学，可以看看我的这篇博客，对vue3有个大概的了解：

Vue3全家桶入门 （通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）https://blog.csdn.net/qq_49900295/article/details/124726599?spm=1001.2014.3001.5501首先，在 main.js 中引入项目需要的依赖：

这里 normalize.css 和 element-plus 需要我们先安装：

normalize.css 是css的初始化文件，它在默认的HTML元素样式上提供了跨浏览器的高度一致性，总之按装它就完事了，element-plus在我们的项目中可以用到一些弹窗，引入它会非常方便。

除了 normalize.css 外，在 main.js 里我们还引入了 base.scss，在这里我们设置了 html 与 body 的字号，方便在样式中使用rem来实现响应式的字体：

下面是项目的 style 目录：

在 viriables.scss 文件中我们主要来定义一些颜色变量：

因为在各个组件中使用这两个颜色特别多，所以我们可以把它单独拿出来，通过变量的形式我们就可以统一更改颜色，这样就非常方便。

下面是 App.vue 中的代码，我们把里面的内容都删掉，我们并不需要 router-link，我们只需要 router-view 渲染子路由就行：

这是首页的目录结构：

这里HomeView相当于首页的根组件，也就是相当于一个容器里面放着 FooTer，NearBy，StaticView三个子组件，从下图可以看出这三个子组件负责的区域。他们共同构建出了首页的样式。

我们看一下 HomeView 中的代码：

我们在 HomeView 中引入三个子组件然后在视图模板中使用引入的子组件。记得要在父组件的 components 中