Vue3+TypeScript+ElementPlus 组件式开发思路分享

项目类型移动端

写代码三思而后行

工单模块

对比其他设计图可以发现重复利用的组件

1、开启设计思路（提取相同参数）

Header.vue

<template><div class="header"><div class="title" v-text="props.titleName"></div><slot name="do"></slot></div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'interface Props {titleName?: string
}const props = withDefaults(defineProps<Props>(), {titleName: '工单管理'
})
</script>

具名插槽可以让底部实现动态化，需要什么传递什么

Pane.vue

<template><el-tabs v-model="activeName" class="demo-tabs"><el-tab-panev-for="(l, i) in props.tabList":key="l.name + i":label="l.name":name="l.name"></el-tab-pane></el-tabs>
</template><script setup lang="ts">
import { computed, withDefaults, defineEmits } from 'vue'interface Props{tabList?: any[],activeN?: any
}
const emit = defineEmits(['update:activeN'])
const props = withDefaults(defineProps<Props>(), {tabList: () => [],activeN: ''
})
const activeName = computed({get() {return props.activeN},set(val) {emit('update:activeN', val)}
})</script>

index.vue

<template><Header><template v-slot:do><Pane:tab-list="state.tabList"@update:active-n="stateApi.itsmType = $event"></Pane></template></Header>
</template>
<script setup lang="ts">
import Pane from '@/components/Pane.vue'
import Header from '@/components/Header.vue'
import { onMounted, reactive, ref, watch } from 'vue'
import { getAllOrder, getTabPaneList } from '@/api/orderDispatch'
import { OrderDispatchTypeApi, OrderForApi } from '@/types'onMounted(() => {getTabList()
})const getTabList = async() => {const { data } = await getTabPaneList() as anystate.tabList = datastateApi.itsmType = state.tabList?.[0]?.nameif (data.length > 0) {getAllOrderList()}
}
const state = reactive<any>({tabList: [],orderList: []
})
const stateApi = reactive<OrderDispatchTypeApi>({itsmType: '',status: 1,time: '2022-04-07 09',currentPageNo: 1,pageSize: 10
})
const orderListLoading = ref<boolean>(false)
watch(() => stateApi.itsmType, () => {getAllOrderList()
})
const changeStateApi = () => {getAllOrderList()
}
const getAllOrderList = async() => {orderListLoading.value = trueconst { data } = await getAllOrder(stateApi) as anyorderListLoading.value = falsestate.orderList = data
}</script>

2、函数式组件设计思路

index.vue

<template><div class="p-4 h-full"><Labelv-for="(l, i) in state.warningList":key="l.styleT + i":style-t="l.styleT":children="l.childrenList"></Label></div>
</template>

Label.vue

<script lang="ts">
import { h, defineComponent } from 'vue'export default defineComponent({name: 'Label',props: {styleT: {type: String,default: () => ''},children: {type: Array,default: () => [] as any[]}},render() {return h('div', {class: this.styleT}, [h('div', { class: (this.children[0] as any).className }, (this.children[0] as any).children),h('div', { class: (this.children[1] as any).className }, (this.children[1] as any).children)])}
})</script>

拆分组件所带来的好处

提高开发效率

在组件化开发之前，我们每个页面都是单独的，如果在开发一个页面的时候遇到了曾今开发过类似的部分，只能复制粘贴到当前页面，然后进行一些改动，有时参数、变量之类的丢失，页面或许还会报错，还要花费大量的时候去排查问题，组件化之后，类似的部分我们只需要引入组件即可，无需重复开发，一定程度上也减少了代码量，极大提高项目的编译速度

方便重复使用

多页面重复使用

方便调试

能够快速确定某一模块报错

增加可维护性

页面都由组件组成，模块与模块之间的耦合度降低，删除修改某个模块的功能时仅需直接修改组件

便于团队开发

下发给每一个人的独立模块，互不干扰

如何拆分组件

保证组件做好份内事，留出接口，把功能给外包出去
尽量扩展组件而不是修改，单个组件只实现单纯的功能
尽量让组件小而精悍
尽量做到入口和出口的参数校验

export interface OrderDispatchTypeApi extends OrderForApi{currentPageNo?: number,pageSize?: number,
}export interface OrderForApi{itsmType?: string,status?: number,time?: string
}export interface OrderListType extends OrderForApi{creatorName?: string,createTime?: string
}

合理组件化

Vue3+TypeScript+ElementPlus 组件式开发思路分享相关推荐

Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...
Agile.Net 组件式开发平台 - 平台系统介绍
平台介绍 Agile.Net 组件式开发平台是一款针对企业级产品的开发框架,平台架构基于SOA服务体系,多层组件式架构打造.平台提供企业应用开发所需的诸如ORM.IOC.WCF.EBS.SOA等分布式 ...
系统分析师范文1：论软件的组件式开发
摘要: 在我所担任的某移动短消息增值应用系统的规划和开发工作中,面对移动短消息广阔的应用领域,和众多不同行业的ASP,巨大的软件开发工作量.我们选择了组件式软件开发方式,在系统的功能.性能.开发效率和 ...
抖音矩阵号搭建及开发思路分享丨抖音矩阵源码丨抖音矩阵号运营
矩阵就是一个内容在多个平台多个账号去做分发,以此去获得的更大的公域流量.通过单个账号带动其他账号分散形成流量,那矩阵通过多个单账号做内容分发,再引流到主账号才是矩阵号的核心思维. 比如我们有10个账号 ...
vue3新拟态组件库开发流程——button组件源码
首先写最基础的button组件 <script setup> const props = defineProps({}) const emit = defineEmits(["c ...
使用组件化开发思路替换 SAP Spartacus 的 Logo
简单来说,组件是应用程序的任何部分,可以在逻辑上分组并被视为单一元素,理想情况下可以作为应用程序其余部分的构建块重用.这个组件中可能有其他组件,也可能在其他组件中使用,但每个单独的"组件&q ...
Vue入门 ---- 组件式开发
##组件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
博奥智源公司，数字化实验室信息管理系统功能开发思路分享
全面遵循检测检验业务管理规范,帮助实验室建立完整的质量保证体系规范检测工作,实现业务流程的自动化控制,确保质量.使样品检测的周期最短,实现信息化管理.完成B/S版本数字化实验室信息管理系统的待办工作. ...
SuperMap Objects组件式开发
文章目录 Form1.Designer.cs Form1.cs Form1.Designer.cs(附) Form1.Designer.cs namespace experiment10 {parti ...

Vue3+TypeScript+ElementPlus 组件式开发思路分享

Vue3+TypeScript+ElementPlus 组件式开发思路分享相关推荐

最新文章

热门文章