【Vue3从零开始-实战】S4：组件拆分和使用vue指令精简页面代码

蜡笔小心_
VIP.5 如鱼得水
202 阅读4分钟

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

前言

实战已经开始了！在前面几篇文章中，我们把首页的布局和样式都完成了，但是将所有内容都写在App.vue里面了。这样就导致App.vue里面的代码很难维护，所以本章将会把App.vue里面的代码全部拆分出来，这样就比较符合Vue框架的风格，也会更加容易维护。

image.png

根据我们前面写的代码来看，整个首页可以分为三个模块：顶部静态资源、中间店铺列表、底部tabbar。

拆分组件

  1. 在views文件夹下面新建一个home文件夹，表示这里面存放首页的组件。
  2. 然后在home文件夹下面新建一个Home.vue

image.png

  1. 将App.vue中的代码全部放到Home.vue中
  2. 将Home.vue当做组件引入到App.vue里面渲染出来
<template>
  <div>
    <Home />
  </div>
</template>

<script>
import Home from './views/home/Home'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<style>
</style>

注意：由于Home.vue相对于App.vue有好几层文件夹包裹住的，所以之前引入的css文件，就需要重新确定上层文件了。

@import "../../style/viriables.scss";
@import "../../style/mixins.scss";

顶部静态资源

  1. 在home文件夹中新建一个StaticPart.vue

image.png

  1. 将Home.vue中关于顶部的DOM元素和样式都复制到StaticPart.vue中
  2. 然后在Home.vue中引入StaticPart.vue组件
<script>
import StaticPart from './StaticPart'
export default {
  name: 'Home',
  components: {
    StaticPart
  }
}
</script>

店铺列表

  1. 在home文件中新建一个Nearby.vue

image.png

  1. 将Home.vue中关于店铺列表的DOM元素和样式都复制到Nearby.vue中
  2. 然后在Home.vue中引入Nearby.vue组件
<script>
import StaticPart from './StaticPart'
import Nearby from './Nearby'
export default {
  name: 'Home',
  components: {
    StaticPart,
    Nearby
  }
}
</script>

tabbar

tabbar的拆分和上面的组件差不多，所以不在赘述了。

image.png

拆分完成

<template>
  <div>
    <div class="wrapper">
      <StaticPart />
      <Nearby />
    </div>
    <Tabbar />
  </div>
</template>

<script>
import StaticPart from './StaticPart'
import Nearby from './Nearby'
import Tabbar from './Tabbar'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  components: {
    StaticPart,
    Nearby,
    Tabbar
  }
}
</script>

<style lang="scss">
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
  overflow-y: auto;
}
</style>
  • 这一块就是拆分完成之后，Home.vue的代码内容了。
  • 这样看起来相比于之前一个页面包含所有代码的时候要精简许多了。
  • 看到首字母大写的标签即表示组件，也方便寻找对应的组件。
  • 拆分出来之后，每个组件大约100行代码左右，维护起来也会更加容易。

使用vue指令精简代码

⭐️ 通过上面的拆分组件之后，其实页面上很多DOM元素其实是重复的，可能只是里面渲染的内容不一样而已，但是标签和样式都是一致的。

🔥 在以前的基础知识章节中，我们学过一些vue指令：v-for、v-if、v-bind、v-html等。下面精简代码的时候就会使用到这些指令。

🎁 在实际项目中，我们获取的数据是从接口端拿到的，相比于我们自定义数据对象会更加精简了。

💥 由于精简代码的过程都差不多，所以下面只是举一个例子，其他的大家可以自行尝试一下。（对应的精简代码会在最后贴出来的）

tabbar

image.png

精简之前我们需要对元素进行拆解，在稿图中会发现tabbar中主要元素就是icon和title，所以我们就可以在setup函数中定义一个数组，将tabbar上的icon和title都封装成一个对象。

setup () {
    const tabbarList = [
      { icon: '&#xe64f;', title: '首页' },
      { icon: '&#xe61a;', title: '购物车' },
      { icon: '&#xe737;', title: '订单' },
      { icon: '&#xe8a0;', title: '我的' }
    ]
    return {
      tabbarList
    }
}

有了数据之后，我们就可以对DOM元素中相同的标签进行循环了。

<div class="tabbar">
  <div class="tabbar__item" v-for="item in tabbarList" :key="item.icon">
    <div class="iconfont">{{item.icon}}</div>
    <div class="tabbar__title">{{item.title}}</div>
  </div>
</div>
  • 循环的时候别忘了加上key，key是循环对象中唯一值就行。

image.png

❓精简tabbar代码并渲染到浏览器之后会发现，title并没有什么不对，但是icon好像变成了一个字符串，并不是我们想要的icon图标。

⭕️ 这是因为vue的插值表达式会对渲染的数据进行转义，导致出来的效果都是一个字符串。想要解决这个问题，就要用到以前学过的一个指令：v-html

<div class="tabbar">
  <div class="tabbar__item" v-for="item in tabbarList" :key="item.icon">
    <div class="iconfont" v-html="item.icon"></div>
    <div class="tabbar__title">{{item.title}}</div>
  </div>
</div>

image.png

通过v-html在对数据进行转义之后，页面上就可以渲染出想要的效果了。

精简后的完整代码

⭐️ 下面会对每个拆分出来的组件进行精简，由于内容差不多，所以只将代码贴出来。

Nearby.vue

<template>
  <div>
    <div class="nearby">
      <h3 class="nearby__title">附近店铺</h3>
      <div class="nearby__item" v-for="item in nearbyList" :key="item.id">
        <img :src="item.imgUrl" class="nearby__item__img">
        <div class="nearby__content">
          <div class="nearby__content__title">{{item.title}}</div>
          <div class="nearby__content__tags">
            <span class="nearby__content__tag" v-for="(innerItem, innerIndex) in item.tags" :key="innerIndex">{{innerItem}}</span>
          </div>
          <p class="nearby__content__highlight">{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

🔥 这里的DOM元素中使用了一个嵌套的v-for循环指令。

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Nearby',
  setup () {
    const nearbyList = [
      {
        id: 1,
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png',
        title: '沃尔玛',
        tags: [
          '月售1万+',
          '月售1万+',
          '月售1万+'
        ],
        desc: 'VIP尊享满89元减4元运费券（每月3张）'
      },
      {
        id: 2,
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png',
        title: '沃尔玛',
        tags: [
          '月售1万+',
          '月售1万+',
          '月售1万+'
        ],
        desc: 'VIP尊享满89元减4元运费券（每月3张）'
      }
    ]
    return { nearbyList }
  }
}
</script>

StaticPart.vue

<div class="icons">
  <div class="icons__item" v-for="item in iconsList" :key="item.desc">
    <img class="icons__item__img" :src="item.imgUrl" />
    <p class="icons__item__desc">{{item.desc}}</p>
  </div>
</div>

setup () {
    const iconsList = [
      {
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/32b200e6-9af9-474d-865b-e11ae4709a68.png',
        desc: '超市便利'
      }
    ]
    return {
      iconsList
    }
  }

这里只是精简了顶部静态数据中的N宫格代码，由于静态数据页面里面只有中间的宫格部分需要循环，而且都是一样的数据，所以这里是展示部分代码，具体的可以自己复制实现。

总结

本篇文章主要是将前面几篇布局章节中的代码进行了拆分和精简，让代码更加符合vue的规范，也让后续更加容易维护。

首页的内容至此就完成了，后面会在写其他页面文章时，使用路由、axios还有一些公共组件进行开发。

avatar
文章
阅读
粉丝