本文主要是介绍封装Vue组件库(一)、前置知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
CDD - 组件优先开发方式
CDD(Component-Driven Development):组件驱动开发
- 自上而下构建UI的过程
- 从组件级别开始,到页面级别结束
- 先从相对完善的设计中,抽象出组件。先隔离开发组件,然后开发页面。
CDD 的好处:
- 组件在最大程度被重用
- 并行开发
- 对单个组件的开发,使用CDD,可以让以页面级开发无法实现的方式在不同团队之间共享任务,这个任务就是开发相对隔离的组件。
- 可视化测试
- 通过一些工具可以直接浏览组件,而不需要到业务系统中再测试组件,可以对组件的不同状态进行测试
学习内容
- Vue 官方文档的 处理组件的边界情况
- 回顾关于处理组件边界的API
- Vue CLI 提供的 快速原型开发
- 方便进行组件开发,并能够单独运行单文件组件
- 开发组件库的最佳实践方式:
- Storybook
- 用于隔离开发组件、方便管理组件库 和 对组件进行测试
- Monorepo
- 项目结构的一种组织方式,有利于管理组件库项目的结构
- Plop
- 基于模块快速生成一个组件的基本结构
- Lerna + Yarn workspaces 的工作方式
- 管理包的依赖,以及方便提交和发布所有组件
- Jest
- 组件开发完毕后,对组件进行测试
- Rollup
- 项目打包
- Storybook
处理组件的边界情况
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接收),默认会绑定到子组件的根元素上。
如果是 class
或 style
,Vue 会将其与子组件中原有的值合并。(props中也不允许设置这两个属性)
这些属性中除了 class
和 style
,可以用 $attrs 获取。
可以通过设置选项 inheritAttrs
为 false
,取消这个默认继承的行为(class
和 style
还是会正常继承合并)。
然后手动通过 $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组件库(一)、前置知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!