持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

开始之前

【vue3从零开始】已经写了七个大章节的内容，也把vue3里面的知识点都大致讲解了一遍，从本篇文章开始，就正式进入实战篇了，我们会一起做一个仿某电商的网站。

在实战项目中，我们不会去完整的写完一个网站，之后把其中一些重点的地方或者是常用的组件写出来，也会在实战过程中把之前没讲过的一些内容重点说明一下。

项目初始化

👆 要开始做一个实战项目了，就得重新去创建一个项目。

vue create vue_pro

✌️ 在创建项目的时候，我们会把Router、Vuex、Css预处理器（本项目中会用到Scss来处理样式）、Eslint等都一并安装到项目中。

Kapture 2022-06-12 at 15.27.14.gif

大家可以根据上面的动图来创建一个自己的项目哦。
项目中使用的Eslint是一个标准版的配置。

👌 项目创建完成之后，就可以将项目导入vscode里面运行起来了。

npm run serve

vscode插件安装

在写代码的时候，我们可能需要一些智能提示或者代码校验的规则，这时候我们就需要在vscode中安装一些适用的插件来帮助我们更好更方便的完善项目。

首先在vscode左侧有一个插件栏，点击进去之后就可以搜索想要的插件了。
项目中需要的而且是vue开发中常用的插件就是ESlint和Vetur了。

ESlint插件主要是校验代码中的语法是否规范，从而给到一些提示。

Vetur插件主要是识别vue文件中的代码，可以使代码高亮显示出来。

配置样式

由于我们这个实战项目是基于手机端的，为了更好的适配浏览器，更正部分浏览器自身的bug并保证各浏览器的一致性，我们需要在项目中安装一个css插件。

npm install normalize.css --save

可以在package.json文件里面看看normalize.css是否有安装成功。

安装成功之后，就可以在main.js里面引用normalize.css了。

import 'normalize.css'

normalize.css就已经配置完成了，接下来就要配置基础样式。

⭐️ 在项目根目录下新建一个style文件夹，style文件夹中再新建一个base.scss文件。

⭐️ 打开base.scss文件，写上如下样式代码：

html{
    font-size: 100px;
}

由于项目是手机端使用的，我们会用rem来表示像素单位，1rem就等于html下面的font-size配置的像素值。这里我配置的就表示1rem = 100px，也方便后续的样式计算。

base.scss配置完之后，也要在main.js中引入。

import './style/base.scss'

下面我们就把App.vue改造一下，看看样式是否有生效。

<template>
  <div>
    JueJin
  </div>
</template>

<style lang="scss">
</style>

然后启动项目之后打开浏览器就可以看到效果了。

由于我们设置html的样式，所以在页面上看到的文字效果会比较大。证明base.scss的样式已经生效了。

因为我们的实战项目是移动端的网页，所以还需要在PC端的chrome浏览器中配置移动端开发模拟器。

Kapture 2022-06-12 at 21.40.22.gif

首页Tabbar样式

项目原稿

在每一个实战环境都会把项目原稿中的尺寸通过贴图的方式展现出来，也方便大家在实战项目中可以更好的一起学习。

研究Tabbar

在tabbar中是有图标和文字构成，采用的是居中并且均匀分布的方式分割出来的。但是通过稿图发现，tabbar两端的间距是不一致的，会有一个居左居右的padding值。

图标配置

tabbar上面的图标均可以在iconfont官网中找到。

把所需的icon都放到一个iconfont项目中保存起来，然后下载至本地打开。

下载的iconfont文件中有一个iconfont.css文件，我们将里面的部分内容复制到项目中的css文件。

在style文件夹中新建一个iconfont.css文件，然后把下面的css代码复制进去。

@font-face {
  font-family: "iconfont";
  src: url('../assets/font/iconfont.woff2') format('woff2'),
    url('../assets/font/iconfont.woff') format('woff'),
    url('../assets/font/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face中url里面是字体文件存储的位置，所以我们需要把下载下来的iconfont中的字体文件放到assets下面的font文件夹中（font文件夹是新建的哦~）。

⭐️ 图标已经配置完成，那么就要去App.vue里面试一下看看会不会生效。

<template>
  <div>
    <div class="iconfont">&#xe737;</div>
    JueJin
  </div>
</template>

<style lang="scss">
.iconfont{
  font-size: 100px;
}
</style>

是在iconfont项目中复制过来的。
iconfont样式名是在iconfont.css中@font-face定义的font-family名称。

tabbar编写

<template>
  <div class="tabbar">
    <div class="tabbar__item">
      <div class="iconfont">&#xe64f;</div>
      <div class="tabbar__title">首页</div>
    </div>
    <div class="tabbar__item">
      <div class="iconfont">&#xe61a;</div>
      <div class="tabbar__title">购物车</div>
    </div>
    <div class="tabbar__item">
      <div class="iconfont">&#xe737;</div>
      <div class="tabbar__title">订单</div>
    </div>
    <div class="tabbar__item">
      <div class="iconfont">&#xe8a0;</div>
      <div class="tabbar__title">我的</div>
    </div>
  </div>
</template>

<style lang="scss">
.tabbar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
  display: flex;
  padding: 0 0.18rem;
  box-sizing: border-box;
}
.tabbar__item{
  flex: 1;
  text-align: center;
}
</style>

根据稿图我们定义了一个tabbar的div标签，并将所需的四个模块分别包裹进去。
由于tabbar是定位在底部的，所以tabbar的样式需要采用绝对定位。
绝对定位的标签在写padding样式时，需要同时加上box-sizing，不然样式会出现偏差。
为了使四个模块都均匀分割，还使用了flex布局。

⭐️ 由于首页中的字体大部分都是12px左右，所以我们在base.scss中还给body定义了一个0.12rem的样式。

🔥 这样就可以在浏览器中看到tabbar的展示效果了

处理间距和文字大小

根据稿图会发现图标大小是20px，还有上下间距。

.tabbar__item{
  flex: 1;
  text-align: center;
  .iconfont{
    font-size: 0.2rem;
    margin: 0.07rem 0 0.02rem 0;
  }
}

由于我们使用的是scss的样式，所以可以直接将iconfont样式写在上级标签（tabbar__item）样式里面。

稿图中的文字大小是10px，而浏览器默认的最小字体样式是12px，所以我们还要手动修改为10px。

.tabbar__title{
  font-size: 20px;
  transform: scale(0.5, 0.5);
  transform-origin: center top;
}

通过transform进行缩放0.5倍，在通过transform-origin从中心和顶部开始缩放。

样式合并

因为scss的特性，我们可以把一些名称前缀相同的样式通过 & 符号合并在一起去写，这样看起来就会简洁一点。

<style lang="scss">
.tabbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
  display: flex;
  padding: 0 0.18rem;
  box-sizing: border-box;
  &__item {
    flex: 1;
    text-align: center;
    .iconfont {
      font-size: 0.2rem;
      margin: 0.07rem 0 0.02rem 0;
    }
  }
  &__title {
      font-size: 20px;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
}
</style>

⭐️ 除了页面上的样式可以合并之外，main.js中的引入样式也可以合并起来。这样可以避免后续的开发中，引入的样式越来越多，导致main.js看起来太混乱。

在style文件夹下面新建一个index.scss文件。
将style文件夹下面的其他样式文件通过import引入进去。

@import './base.scss';
@import './iconfont.css';

最后在main.js中只需要引入index.scss即可。

import './style/index.scss'

总结

本篇文章主要是把实战项目的搭建过程和首页的tabbar样式编写了一部分，在之后的文章中会继续实战项目的其他内容的学习。

【Vue3从零开始-实战】S1：工程初始化及首页Tabbar样式编写