Vue3 组件的开发详情

目录
  • 一、前言
  • 二、组件的开发
    • 1、组件的构成
    • 2、header部分组件的开发
    • 3、footer组件的开发
    • 4、修改App.vue
    • 5、移除Helloword组件及相关代码
    • 6、重启服务查看
  • 三、最后

一、前言

果然长时间坐着或站着,会给腰带来很大负担,声明下我不是腰脱,就是个穿刺手术而已,身上有多处缝针没长好,所以会给肚子和腰带来一定的负担。

上一篇文章已经写了关于布局的开发,传送门《Vue3(三)网站首页布局开发 》,但是我们写代码,肯定是继承了优秀的代码风格,封装的特性,所以这里我们再对代码进行修改,抽离公共部分的footerheader部分。

二、组件的开发

headerfooter是公共的部分,每个页面都有,所以要抽离出来,然后后续的维护再App.vue中维护即可。

1、组件的构成

components下创建组件,基本结构如下:

templatescript两对标签构成

2、header部分组件的开发

如上图红圈部分所示,就是我们要进行抽离的公共部分,即组件的开发。

在components下创建组件,header部分组件代码如下:

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、footer组件的开发

如上图所示,就是我们要footer部分组件的开发,示例代码如下:

html
<template>
  <a-layout-footer style="text-align: center">
    软件测试君 ©2021 Created by 六哥20211017
  </a-layout-footer>
</template>

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

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

4、修改App.vue

示例代码如下:

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、移除Helloword组件及相关代码

home修改如下:

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、重启服务查看

重新编译,再次访问页面结果如下:

三、最后

到此这篇关于Vue3(四) 组件的开发的文章就介绍到这了,更多相关Vue3 组件开发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.0保持一致. ◆ 快速引入 在main.js中全局引入v3p

  • 京东 Vue3 组件库支持小程序开发的详细流程

    源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/ 小程序多端适配 设计初衷 在跨端小程序的开发过程中,我们发现没有合适的组件库可以使用,尤其在做电商商城类场景的业务时,没有符合京东 App 规范的组件库为我们的小程序项目提供支持.为了填补这一空白,同时让 NutUI 组件库能够为更多的开发者带来便利,我们决定在 NutUI 3.0 中 增加小程序多端适配的能力. 如何适配 Taro 在小程序跨端

  • Vue3 组件的开发详情

    目录 一.前言 二.组件的开发 1.组件的构成 2.header部分组件的开发 3.footer组件的开发 4.修改App.vue 5.移除Helloword组件及相关代码 6.重启服务查看 三.最后 一.前言 果然长时间坐着或站着,会给腰带来很大负担,声明下我不是腰脱,就是个穿刺手术而已,身上有多处缝针没长好,所以会给肚子和腰带来一定的负担. 上一篇文章已经写了关于布局的开发,传送门<Vue3(三)网站首页布局开发 >,但是我们写代码,肯定是继承了优秀的代码风格,封装的特性,所以这里我们再对

  • vue3组件化开发常用API知识点总结

    目录 组件化思想 组件通讯 $props $emits $parent $attrs proviede & inject 插槽 slot 渲染作用域 作用域插槽 v-model 表单组件 自定义组件 改变默认参数 样式绑定相关 class style 总结 组件化思想 为什么使用组件化开发? 当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发.包括小程序开发也会用到组件化开发的思想. 分析组件化思想开发应用程序: 将一个完整页面拆分成很多个小组件 每

  • vue3组件化开发之可复用性的应用实例详解

    目录 自定义指令 基本结构 自定义 v-loading 指令 插件 基本结构 实现一个全局状态管理插件 Teleport 传送 相关链接 总结 可复用性也是组件化开发的一个优势,能让代码更加简洁优雅.方便维护.下面主要写了vue3中能体现出复用性的一些API的应用. 自定义指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute. v-text v-show v-if ... 等是 vue 中内置的一些指令,当这些内置指令无法满足我们的要求时,这时候也可以使用自定义指令

  • Vue3搭建组件库开发环境的示例详解

    目录 1 packages 目录 1.1 foo 目录 1.2 yyg-demo-ui 目录 2 实现 foo 示例组件 2.1 初始化 package.json 2.2 初始化 foo 目录结构 2.3 定义 foo 组件的 props 2.4 实现 foo 组件 2.5 定义 foo 组件入口文件 3 实现 yyg-demo-ui 3.1 初始化 package.json 3.2 安装依赖 3.3 定义入口文件 前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.

  • vue3+electron12+dll开发客户端配置详解

    当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试.网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解. 修改仓库源 由于electron版本的未知性,可能存在serve可用而build之后打开白屏的情况,因此需要谨慎对待.最好在版本可用的情况下commit一个版本,方便代码回滚,如果谁有更好的资料希望共享. 在开始配置前,可以将yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmr

  • vue3组件中v-model的使用以及深入讲解

    目录 v-model input中使用双向绑定数据 组件中的v-model 其他写法 总结 v-model input中使用双向绑定数据 v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template> <input type="text" :value="tryText&q

  • DevOps自动化组件RUNDECK开发部署使用说明

    目录 前言 RunDeck的使用场景 (一).标准流程自动化 1.自定义工作流 2.端到端的业务流程在本地或远程服务器 3.跨平台 4.可扩展 5.安全访问控制 6.和主流的DevOps组件集成 (二)作业调度 使用案例分析 开发部署服务 (1)如何二次开发RunDeck (2)怎么部署RunDeck环境 1.获得部署jar 2.新建rundeck目录 3.访问RunDeck服务 4.用户指定的配置? RunDeck的使用 (1)创建Project (2)添加节点信息 (3)新增用于节点服务器权

  •  用Vue Demi 构建同时兼容Vue2与Vue3组件库

    目录 前言: 一.Vue Demi 中的额外 API 1.isVue2 and isVue3 二.Vue Demi 入门 前言: Vue Demi 是一个很棒的包,具有很多潜力和实用性.我强烈建议在创建下一个 Vue 库时使用它. 根据创建者 Anthony Fu 的说法,Vue Demi 是一个开发实用程序,它允许用户为 Vue 2 和 Vue 3 编写通用的 Vue 库,而无需担心用户安装的版本. 以前,要创建支持两个目标版本的 Vue 库,我们会使用不同的分支来分离对每个版本的支持.对于现

  • Vue3.x项目开发的一些常用知识点总结

    目录 一.定义组件属性 二.formatter简写 三.子父组件通信 四.监听组件属性变化 五.自定义指令 总结 PS:以下知识点都是基于 vue3.x + typescript + element-plus + setup语法糖 使用的. 一.定义组件属性 const props = defineProps({ visible: { type: Boolean, default: false } }) console.log(props.visible) [warning] 注意:define

随机推荐