封装Vue组件库(一)、前置知识

2024-08-23 01:38

本文主要是介绍封装Vue组件库(一)、前置知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CDD - 组件优先开发方式

CDD(Component-Driven Development):组件驱动开发

  • 自上而下构建UI的过程
  • 从组件级别开始,到页面级别结束
    • 先从相对完善的设计中,抽象出组件。先隔离开发组件,然后开发页面。

CDD 的好处:

  • 组件在最大程度被重用
  • 并行开发
    • 对单个组件的开发,使用CDD,可以让以页面级开发无法实现的方式在不同团队之间共享任务,这个任务就是开发相对隔离的组件。
  • 可视化测试
    • 通过一些工具可以直接浏览组件,而不需要到业务系统中再测试组件,可以对组件的不同状态进行测试

学习内容

  • Vue 官方文档的 处理组件的边界情况
    • 回顾关于处理组件边界的API
  • Vue CLI 提供的 快速原型开发
    • 方便进行组件开发,并能够单独运行单文件组件
  • 开发组件库的最佳实践方式:
    • Storybook
      • 用于隔离开发组件、方便管理组件库 和 对组件进行测试
    • Monorepo
      • 项目结构的一种组织方式,有利于管理组件库项目的结构
    • Plop
      • 基于模块快速生成一个组件的基本结构
    • Lerna + Yarn workspaces 的工作方式
      • 管理包的依赖,以及方便提交和发布所有组件
    • Jest
      • 组件开发完毕后,对组件进行测试
    • Rollup
      • 项目打包

处理组件的边界情况

Vue 中用于处理组件边界情况的API(官方文档):

  • $root 访问Vue的根实例
    • 在组件比较少的小型项目中,可以在Vue根实例中存储共享数据,并且是响应式的,这样很方便
    • 但是大多数情况下,还是推荐Vuex管理应用的状态
  • $parent 获取父组件
    • 使用 $parent 获取父组件的成员,可以替换 props 使用
    • 通过 $parent 获取的成员是可以修改的(props不能修改),也就是子组件可以直接修改父组件中的成员
    • 如果应用复杂,将变得难以维护,如果通过这种方式改变了父组件成中的员,出现了问题,就很难找到更改的位置
    • 当组件嵌套比较多的时候,使用起来也不方便
  • $children 获取所有子组件
    • $children是一个数组,通过索引获取子组件,可读性不高
    • 如果要获取所有子组件可以使用这种方式,如果要获取单个子组件可以使用 ref
  • $refs 通过 ref 访问特定组件
    • 如果在普通的HTML标签上定义 ref 属性,获取的就是这个标签的 DOM 对象
    • 如果在自定义组件上定义 ref 属性,获取的就是这个组件的实例
    • 注意:需要在组件渲染完毕后才能通过 ref 获取组件
    • Element-ui 中就是使用 $refs 获取表单组件,调用它的validate方法进行验证
  • 依赖注入 provide / inject
    • 如果组件嵌套比较多的话,使用$parent 或 props就会比较麻烦(每个组件都要传递),通过依赖注入,可以很方便的让子孙组件使用祖先组件注入的成员
    • 祖先组件通过 provide 提供成员
    • 子孙组件通过 inject 注入祖先组件提供的成员
    • 注意:通过依赖注入方式注入到子孙组件的成员同 props 一样,不是响应式的,不能被修改,可以看成大范围的 props
    • 坏处:组件之间的耦合变高,子孙组件依赖祖先组件,使重构变得困难,开发自定义组件的时候可以使用这种方式

$attrs / $listeners

开发自定义组件时可能会用到这两个属性。

  • $attrs

父组件给子组件设置的非 prop 属性(没有被props接收),默认会绑定到子组件的根元素上。

如果是 classstyle,Vue 会将其与子组件中原有的值合并。(props中也不允许设置这两个属性)

这些属性中除了 classstyle ,可以用 $attrs 获取。

可以通过设置选项 inheritAttrsfalse,取消这个默认继承的行为(classstyle 还是会正常继承合并)。

然后手动通过 $attrs 绑定属性。

// 父组件
<child type="text" required placeholder="enter your name"></child>// 子组件
<div><input v-bind="$attrs" />或者<input :type="$attrs.type" :required="$attrs.required" :placeholder="$attrs.placeholder" />
</div>
  • $listeners

同 $attrs 类似,可以获取父组件绑定到子组件的所有事件。

它不会默认绑定到子组件的根元素,可以通过 $listeners 向内部组件传递。

// 父组件
<child @input="onInput" @change="onChange" @myevent="onmyevent"></child>// 子组件
<div><!--input 和 change 都是input的原生事件,直接绑定即可生效--><!--myevent 不是input支持的原生事件,绑定无效--><input v-on="$listeners" /><!--手动绑定事件--><comp @onchange="$listeners.change"></comp>
</div>

快速原型开发

  • Vue CLI 中提供了一个插件可以进行原型快速开发
    • 它可以很方便的运行一个单文件组件,而不需要关心额外的配置
    • 适合开发少量的组件
  • 这个插件必须全局安装,所以没有保证所有机器上的版本一致(后面有其他的工具替换)
    • npm i -g @vue/cli-service-global
  • 开发完组件后,使用 vue serve 快速查看组件的运行效果
    • 注意:使用 vue 命令,所以要安装 npm i -g @vue/cli

vue server

  • vue server 默认会在当前目录寻找以下入口文件
    • main.js、index.js、App.vue、app.vue
  • 也可以指定要加载的入口文件(组件)
    • vue server ./src/login.vue

二次开发

除了从零开始开发自定义组件外,还可以在第三方组件的基础上进行二次开发,例如基于Element-UI 开发自己的组件。

安装 ElementUI 和 配置

  • 初始化 package.json npm init -y
  • 安装 ElementUI vue add element
# 如何导入 ElementUI
? How do you want to import Element? (Use arrow keys)
Import on demand # 按需导入
# 选择本地语言
? Choose the locale you want to load (Use arrow keys)
zh-CN
  • 加载 ElementUI,使用 Vue.use() 安装插件
// /main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// Login.vue中使用了elementUI中的组件
import Login from './src/Login.vue'Vue.use(ElementUI)new Vue({el:'#app',render: h => h(Login)
})

运行 vue serve 会自动生成 index.html 引入 main.js

组件分类

  • 第三方组件
    • 例如:ElementUI、iview
    • 如果开发的组应用对界面要求不高,可以直接使用第三方组件
  • 基础组件
    • 例如:文本框、按钮、表单
    • 如果对组件的样式有比较高的要求,或者有一套自己的使用标准,这个时候需要开发自己的组件库,开发一套方便团队内部使用的基础组件(或通用组件)
  • 业务组件
    • 结合特定的行业使用场景的组件,根据用户的行为输出特定的界面展示给用户
    • 如果针对特定的行业,比如财务、餐饮或者人力系统,会有针对特定业务可以抽象出来的组件,方便未来的重用
    • 开发业务组件一般可以基于现有的组件(例如第三方组件),在基于现有组件的基础上进行开发

这篇关于封装Vue组件库(一)、前置知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1097989

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化