VUE3.0(一)：vue3.0简介

vue3官方文档

单页面(SPA)和多页面(MPA)的介绍

1）单页面应用： SPA是指整个应用只有一个HTML文件，所有页面内容都包含在这个HTML文件中，但页面之间的跳转仅刷新局部资源，
①其优点包括用户体验好（因为不需要重新加载整个页面）②更好的性能（通过缓存和懒加载技术），以及前后端分离的开发模式，便于维护和升级，
①其缺点包括SEO不友好（因为只有一个HTML文件），②首屏加载可能较慢，以及浏览器兼容性问题。
多页面应用。MPA是指每个页面对应一个HTML文件，每次页面跳转时都需要重新加载整个页面，这种应用模式通常使用后端模板引擎如JSP或Thymeleaf来生成页面，
①其优点包括更好的浏览器兼容性和SEO友好性（因为每个页面都有独立的URL），以及开发效率较高（因为每个页面是独立的），
②其缺点包括用户体验较差（每次跳转都需要重新加载页面），以及开发和维护成本较高。

工程创建
3.1：vue-cil 创建

查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
安装或者升级你的@vue/cli
npm install -g @vue/cli
创建 项目名称为vue_test的vue3项目
vue create vue_test
启动
cd vue_test // 进入vue_test项目文件
npm run serve // 启动vue3项目

Vue cli创建项目时键盘操作无效；vue3.0项目搭建自定义配置
3.2：使用 vite 创建

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。（这里不详细研究）
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
npm 6.x
npm init vite@latest 项目文件名称 --template vue
npm 7+，需要加上额外的双短横线
npm init vite@latest 项目文件名称 – --template vue
cd 项目文件名称
npm install // 安装node依赖包
npm run dev // 启动vue3项目

3.3：对比两种方式创建项目# Vue 3 的新特性
vite 优势如下：

① 开发环境中，无需打包操作，可快速的冷启动。
② 轻量快速的热重载（HMR）。
③ 真正的按需编译，不再等待整个应用编译完成。

传统 webpack 编译：每次执行编译时，都会通过入口 entry 先去找到各个路由，再去加载每个路由各自的模块，然后会进行打包成为 bundle.js 文件，最后才通知服务器热更新。所以换句话说就是等所有文件加载就绪之后才去渲染更新页面的==》较慢

vite 编译：与传统构建不同的是，vite 会先准备好服务器更新，再去找到入口文件然后再动态的找到需要加载的路由去编译那个路由下的模块，类似于按需加载，总体体积较小且更新更快。