06_Vue组件化开发基础.pdfVIP

Vue组件化基础-脚手架

王红元coderwhy

目录

1Vue组件化开发思想

content

2注册Vue的全局组件

3注册Vue的布局组件

4Vue的开发模式解析

5VueCLI安装和使用

6Vue的项目目录分析

coderwhy人处理问题的方式

◼人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的

所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

但是，我们人有一种天生的能力，就是将问题进行拆解。

如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

coderwhy认识组件化开发

◼组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放

在一起，处理起来就会变得非常复杂，而且不

利于后续的管理以及扩展；

但如果，我们讲一个页面拆分成一个个小的功

能块，每个功能块完成属于自己这部分独立的

功能，那么之后整个页面的管理和维护就变得

非常容易了；

如果我们将一个个功能块拆分后，就可以像搭

建积木一下来搭建我们的项目；

coderwhy组件化开发

◼现在可以说整个的大前端开发都是组件化的天下，

无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发，包括小程序的

开发也是采用组件化开发的思想。

◼所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。

◼我们需要通过组件化的思想来思考整个应用程序：

我们将一个完整的页面分成很多个组件；

每个组件都用于实现页面的一个功能块；

而每一个组件又可以进行细分；

而组件本身又可以在多个地方进行复用；

coderwhyVue的组件化

◼组件化是Vue、React、Angular的核心思想，也是我们后续课程的重点（包括以后实战项目）：

前面我们的createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件；

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用；

任何的应用都会被抽象成一颗组件树；

◼接下来，我们来学习一下在Vue中如何注册一个组件，以及之后如何使用这个注册后的组件。

coderwhy注册组件的方式

◼如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个

组件呢？

◼我们先从简单的开始谈起，比如下面的模板希望抽离到一个单独的组件：

◼注册组件分成两种：

全局组件：在任何其他的组件中都可以使用的组件；

局部组件：只有在注册的组件中才能使用的组件；

coderwhy注册全局组件

◼我们先来学习一下全局组件的注册：

全局组件需要使用我们全局创建的app来注册组件；

通过component方法传入组件名称、组件对象即可注册一个全局组件了；

之后，我们可以在App组件的template中直接使用这个全局组件：

coderwhy全局组件的逻辑

◼当然，我们组件本身也可以有自己的代码逻辑：

比如自己的data、computed、methods等等

coderwhy组件的名称

◼在通过ponent注册一个组件的时候，第一个参数是组