3-01-基于Vite创建项目

单页面应用程序

1. 什么是单页面应用程序

单页面应用程序（Single Page Application，简称SPA）即整个工程只有一个index页面，所有的功能和交互都在这个页面中实现

2. 有什么特点

1. 只有在页面初始化的时候加载对应资源，像HTML、CSS、JS

2. 加载完成后，不会因为用户的操作重新加载页面或跳转，而是通过Javascript来动态变换页面内容，实现交互。

3. 优点

1. 良好的交互体验

• 单页面应用内容不会重新加载页面

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

• 不会跳转到其他页面，避免了白屏现象

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

• 后端只专注于提供API的接口，更易于API的复用

• 前端只关心页面的渲染，更利于前端工程化的发展

3. 减轻服务器压力

• 服务器只负责数据，不需要关心页面的合成跟逻辑的处理，提高吞吐量

4. 缺点

1. 首屏加载慢

• 路由懒加载

• 代码压缩

• CDN加速

• 网络传输压缩

2. 不利于SEO

• SSR服务端渲染

Vite

1. 创建工程化SPA的两种方案

	vite	vue-cli
支持vue版本	仅支持3.x	支持3.x跟2.x
是否基于webpack	否	是
运行速度	快	慢
功能完整度	小而巧（逐渐完善）	大而全
是否可企业应用	目前不建议	可以使用

2. 创建vite项目

npm init vite-app 项目名称

cd 项目名称

npm install //安装相关依赖

npm run dev //运行项目

3. 项目运行流程

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

其中：

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

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

3. main.js把App.vue渲染到index.html的el区域

main.js的实现代码：

import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);

app.mount('#app');

参考：

Vue3.0-01.SPA -
了解单页面应用程序的概念及特点

Vue3.0-02.SPA -
了解单页面应用程序的优缺点

Vue3.0-03.SPA -
了解vue中创建工程化SPA的两种方案

Vue3.0-04.vite -
基于vite创建工程化的vue项目

Vue3.0-05.vite -
梳理项目的基本结构

Vue3.0-06.vite -
了解vite项目的运行流程