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

项目首页开发

项目准备✌️

样式开发👍

防抖👊

底部横条✌️

登陆注册功能开发

样式编写 👐

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

使用 axios 发送登录 Mock 请求👈

请求函数的封装🙌

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

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

项目首页开发💤

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

项目首页：

登录页面：

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

项目准备

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

Vue3全家桶入门（通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）https://blog.youkuaiyun.com/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 --save

npm 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>