【Vue3 第十一章】组件化基础

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、组件化开发思想

1.1 组件概念

组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架。

组件 (Component) 作为 Vue.js 最强大的功能之一，可以扩展 HTML 元素，封装可重用的代码。

生活中的组简化思想体现：

组装一台电脑需要很多部件，如上面列出的部分主要部件…这些部件多是工厂按照一定的标准进行生产。

电脑厂家，分别从生产这些配件的工厂定制合格的配件产品，对这些标准配件进行集合组装，最终组装出我们所用的笔记本或者台式电脑，当然我们自己也可以进行配件的购买和电脑的组装…

编程中的组件化思想体现：

如上：整个页面由多个组件组件，每个组件部分可能包含：CSS单元、JS模块等等信息。

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构

1.2 组简化规范：Web Components

作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。

Web Components 旨在解决这些问题， 它是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

Web Components 由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

Custom elements（自定义元素）： 一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。

Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

HTML templates（HTML模板）： template和slot元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

二、组件实操应用

2.1 实现的效果图展示

每一个 .vue 文件都是一个组件 (SFC，单文件组件)，每一个组件都可以复用。

通常一个应用程序会以一棵嵌套组件树的形式来组织呈现，下面就是我们要实现的效果图：

简化后的线型图如下：

2.2 预处理器

本案例中采用的预处理器为 Sass，当然可以根据自己需要选择 Less 或者 Stylus 等。

Sass(Syntactically Awesome StyleSheets) 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

安装 Sass

npm install --save-dev sass

Vite 中内置 Sass，直接安装即可，不需要安装 sass-loader

2.3 scoped

scoped 属性作为