Development details of Vue3 components

1. Introduction
2. Component Development

1. Component composition
2. Development of some header components
3. Development of footer component
4. Modify App.vue
5. Remove Helloword components and related codes
6. Restart the service to view

3. Finally

1. Introduction

As expected, sitting or standing for a long time will put a lot of pressure on the waist. Let me make it clear that I don’t have a dislocated waist, I just had a puncture surgery and there are many stitches on my body that have not healed well, so it will put a certain pressure on my stomach and waist.

The previous article has written about the development of the layout, please refer to "Vue3 (III) Website Homepage Layout Development", but when we write code, we must inherit the excellent code style and encapsulation characteristics, so here we modify the code again and extract footer and header parts of the public part.

2. Component Development

header and footer are common parts and exist on every page, so they need to be extracted and then maintained in App.vue .

1. Component composition

Create components under components . The basic structure is as follows:

It consists of two pairs of tags: template and script

2. Development of some header components

As shown in the red circle in the figure above, this is the common part we want to extract, that is, the development of components.

Create components under components. The component code of header is as follows:

html
<template>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 11122</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TheHeader',
});
</script>

3. Development of footer component

As shown in the figure above, we need to develop the footer component. The sample code is as follows:

html
<template>
  <a-layout-footer style="text-align: center">
    Software Tester©2021 Created by Liuge20211017
  </a-layout-footer>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TheFooter',
});
</script>

4. Modify App.vue

The sample code is as follows:

html
<template>
  <a-layout>
    <the-header></the-header>
    <router-view/>
    <the-footer></the-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
<script>
import TheHeader from "@/components/the-header";
import TheFooter from "@/components/the-footer";

export default {
  components:
    TheHeader,
    TheFooter
  }
}
</script>

5. Remove Helloword components and related codes

The home is modified as follows:

html
<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      Content
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
});
</script>

6. Restart the service to view

Recompile and access the page again. The results are as follows:

3. Finally

This is the end of this article about the development of Vue3 (IV) components. For more relevant Vue3 component development content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of common methods of Vue development
Practical Vue development skills
Vue Element front-end application development integrates ABP framework front-end login
Using Vue.js to develop WeChat applet open source framework mpvue analysis
Detailed explanation of goods component development in Vue framework
Detailed explanation of Vue framework and front-end and back-end development

<<: Copy and paste is the enemy of packaging

>>: CSS transparent border background-clip magic