Vue3-组件基础

一. 单页面应用程序

1. 何为单页面应用程序

     单页面应用程序（英文名：Single Page Application）简称为 SPA，本质是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互，都在这唯一的一个页面中完成。

2. 单页面应用程序的特点

    SPA 将所有的功能都局限在了一个 web 页面中，仅在该 web 页面初始化时加载相应的资源。

    一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript 动态的切换 HTML 的内容，从而实现页面与用户的交互。

3. 单页面应用程序的优点

    1. 良好的交互体验

        ● 单页应用的内容的改变无需重新加载整个页面

        ● 获取数据通过 Ajax 异步获取

        ● 没有页面之间的跳转，不会出现 “白屏现象”

    2. 良好的前后端工作分离模式

        ● 后端专注于提供 API 接口，更容易实现 API 接口的复用

        ● 前端专注于页面的渲染 更利于前端工程化的发展

    3. 减轻服务器的压力

        ● 服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

4. 单页面应用程序的缺点

    1. 首屏加载慢

        解决方案：路由懒加载、代码压缩、CDN加速、网络传输压缩

    2. 不利于 SEO

        解决方案：SSR 服务器端渲染

5. 如何快速创建 vue 的 SPA 项目

    1. 基于 vite 创建 SPA 项目

    2. 基于 vue-cli 创建 SPA 项目

 二. vite 的基本使用

1. 创建 vite 项目

    按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目

 2. 项目结构的梳理

    使用 vite 创建的项目结构如下：

 

其中：

    ● node_modules 目录用来存放第三方依赖包

    ● public 是公共的静态资源目录

    ● src 是项目的源代码目录

    ● .gitignore 是 Git 的忽略文件

    ● index.html 是 SPA 单页面应用程序中唯一的 HTML 页面

    ● package.json 是项目的包管理配置文件

在 src 这个项目源代码目录之下，包含了如下的文件和文件夹：

其中：

    ● assets 目录用来存放项目中所有的静态资源文件（css、fonts等）

    ● components 目录用来存放项目中所有的自定义组件

    ● App.vue 是项目的根组件

    ● index.css 是项目的全局样式表文件

    ● main.js 是整个项目的打包入口文件

3. vite 项目的运行流程

    在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

    1. App.vue 用来编写待渲染的模板结构

    2. index.html 中需要预留一个 el 区域

    3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

三. 组件化开发思想

 1. 何为组件化开发

    组件化开发：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

 2. 组件化开发的优点

    ● 提高了前端代码的复用性和灵活性

    ● 提升了开发效率和后期的可维护性

3. vue 中的组件化开发

     vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质 上就是一个 vue 的组件。

四. vue 组件的构成

1. vue 组件组成结构

    每个 .vue 组件都由 3 部分构成，分别为：

    ● template -> 组件的模板结构

    ● script -> 组件的 JavaScript 行为

    ● style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

在 vue 3.x 的版本中，