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

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 中引入项目需要的依赖：

import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import 'normalize.css'import './style/base.scss'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'const app = createApp(App)app.use(store)app.use(router)app.use(ElementPlus)app.mount('#app')

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

npm install normalize.css --savenpm install element-plus --save

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

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

html { font-size: 100px;}body { font-size: .12rem;}

下面是项目的 style 目录：

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

$content-fontcolor: #333;$content-bgcolor: #F1F1F1;

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

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

<template> <router-view /></template><script>export default ({ name: 'App'})</script>样式开发

这是首页的目录结构：

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

 

我们看一下 HomeView 中的代码：

<template> <div class="wrapper"> <static-view /> <near-by /> </div> <foo-ter /></template><script>import StaticView from './StaticView.vue'import NearBy from './NearBy.vue'import FooTer from './FooTer.vue'export default { name: 'HomeView', components: { StaticView, NearBy, FooTer }}</script><style lang="scss">@import '../../style/viriables.scss';.wrapper { overflow-y: auto; position: absolute; left: 0; top: 0; right: 0; bottom: .5rem; padding: 0 .18rem .1rem .18rem; .wrapper--content { color: $content-fontcolor; }}.fl { float: left;}</style>

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