文章目录什么是前端模块化、组件化和工程化？ 为什么要组件化？ 组件化与模块化的区分套接字组件库结语
什么是前端模块化、组件化、工程化？
前端模块化：可以理解为定制业务抽象包的组，根据项目情况组合包，例如可以分为登录模块、评论模块。 模块维护性好，组合灵活，呼叫方便，多人合作互不干扰。
前端组件化：是指具体功能的封装。 例如，可以将所有分页封装在分页组件中并统一使用，以实现组件的重用并提高开发效率。
前段工程化：概念：指使用软件工程技术和方法进行前端项目的开发、维护和管理。
为什么要组件化？
首先接触组件化思想的是写react。 随着项目的增加，组件化的思想越来越重要。
在正常的业务场景中，对项目进行这样的分层。
基本组件：
也可以将基础程序集视为小部件，即组件。 例如输入、按钮、自动完成等。 在哪里都可以使用。 业务组件：
我理解的业务组件是组件。 这些组件由基本组件组成，它们根据业务场景的需要形成了具有数据和逻辑的业务组件。 当然，这些业务组件可以抽象为可用于多个模块组件的组件，如页面底部的fix中的footer。 每个模块都必须有它，因为首页模块、用户信息模块、产品列表模块的跳转信息等可能已集成。 模块部件：
这是我们根据具体业务需求具体推出的一个个模块。 例如，登录、商品详细页面等。 是业务组件和基础组件的集成。 让我们回到那里最原始的问题。 为什么要组件化呢？通过上面的分割，我们可以看到组件化使我们的代码成为低耦合。 我们不再需要像以前的开发那样把所有的东西放在一起，开发效率大大提高了。 同时，避免了车轮的重构，提高了拉线质量，降低了维护的成本。
组件化和模块化的区别
组件：第一个目的是代码重用，功能相对单一或独立。 组件化是指纵向分层，因为它位于整个系统的代码级别的最底层，并依赖于其他代码。
组件的出现是为了划分Vue实例的代码量，只要不同的功能模块可以在不同的组件中划分未来需要什么功能，并调用相应的组件即可，重点是代码的重用
模块：因为第一个目的是将相同类型的代码放在一起，所以模块的功能相对复杂，但都属于同一业务。 模块之间也有依赖关系，但大部分是业务上的相互跳跃，在地位上是平面的。
侧重于功能划分
与组件模块近似的概念对是库和框架。 库的概念与代码堆相近，是分层的概念，因此对应于组件化。 框架是结构化的代码，因此适用于模块化。 框架是骨头，模块化是肉。
模块是独立的文件。 此文件中的所有变量都无法从外部获取。 为了能够从外部读取模块内部的变量，必须使用export关键字输出变量。
导出命令用于定义模块的对外接口。
用于指定模块的缺省输出的export default命令。
导出和导出默认命令之间的差异：对于导出，导入命令接受一对大括号，并在其中指定要从其他模块导入的变量的名称。 大括号中的变量名称必须与导入模块(profile.js )的对外接口的名称相同。
如果要重命名输入的变量，请在import命令中使用as关键字重命名输入的变量。
导入{ lastnameassurname } from './profile.js '； 当输出导出默认值并且其他模块加载模块时，import命令可以为匿名函数指定任何名称并且可以不使用大括号
由于模块只有一个缺省输出，因此只能使用一次导出默认命令。 导出有多个输出，可以根据需要进行部署
插槽插槽插槽允许您在调用组件时添加自己的内容
通常会忽略组件标签之间的内容。 插槽允许您将标签之间的内容渲染到指定位置
插槽可以包含任何模板代码，包括HTML和其他组件
插槽具有默认内容。
slotdefaultinfo/slot http://www.Sina.com /
给slot标签赋予name属性，template使用v-slot:name的形式，每个插槽对应不同的内容
请注意，v-slot只能添加到
具名插槽
父模板的所有内容都是用父范围编译的。 子模板的所有内容都是用子作用域编译的。
要传递值的父组件通过自定义属性将值传递给子组件，子组件通过props接收子组件，通过$emit触发自定义事件，然后通过返回参数将值传递给父组件父组件通过在此事件中调用的函数接收参数，而非父子组件不能直接传递值。 建议将需要传递数据的子组件合并为一个组件。 如果需要传递，可以先传递给父组件，然后传递给子组件，也可以创建一个通用的vue实例，分别部署到两个组件中，以沟通桥梁。 数据较多时，一般使用vuex进行统一的状态管理。 组件库建议使用vue中几种常用的组件库
vant:https://you Zan.github.io/vant/#/zh-cn /
element:https://element.eleme.cn/#/zh-cn/component/installation
iview ui:https://www.iview ui.com/docs/introduce
结语酸狗今天分享这些。 那么再见吧~