Vue 3.0 组件基础（上）

一、单页面应用程序(SPA)

一个web网站中只有一个html页面，所有的功能和交互都在这个页面内完成。

1. 特点：

• 仅在该 web 页面初始化时加载相应的资源。
• 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。

2. 优点：

① 良好的交互体验

• 单页应用的内容的改变不需要重新加载整个页面
• 获取数据也是通过 Ajax 异步获取
• 没有页面之间的跳转，不会出现“白屏现象”

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

• 后端专注于提供 API 接口，更易实现 API 接口的复用
• 前端专注于页面的渲染，更利于前端工程化的发展

③ 减轻服务器的压力

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

3. 缺点：

① 首屏加载慢

• 路由懒加载
• 代码压缩
• CDN 加速
• 网络传输压缩

② 不利于 SEO

• SSR 服务器端渲染

二、vite基本使用

1. 创建vite项目

nom init vite-app 项目名称

cd 项目名称
npm intall
npm run dev

2. 项目结构

• node_modules 目录用来存放第三方依赖包
• public 是公共的静态资源目录
• src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）
• .gitignore 是 Git 的忽略文件
• index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
• package.json 是项目的包管理配置文件

3. 运行流程

通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

3.1 在 App.vue 中编写模板结构

清空App.vue的默认内容：

3.2 在 index.html 中预留 el 区域

3.3 在 main.js 中进行渲染

//1. 从vue中按需导入createApp函数
import { createApp } from 'vue'
//2. 导入待渲染的App组件
import App from './App.vue'
import './index.css'

//3. 调用createApp(),创建spa实例
//把app组件作为参数传递给createApp函数，要把app渲染到index.html页面上
const spa_app = createApp(App)
//4. 调用spa实例的mount方法，用来指定vue实际要控制的区域
spa_app.mount('#app')

三、Vue组件的构成

1. 构成

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

• template -> 组件的模板结构
• script -> 组件的 JavaScript 行为
• style -> 组件的样式

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

2. template 节点

每个组件对应的模板结构，需要定义到