最近在写一个智慧相册的项目，刚刚结束了前端的基本搭建，总结复盘以下其中的知识点遗忘也仅供参考
首先是一些Vue3的特点：
更好的性能：Vue 3 的模板编译器经过了重新设计和优化，编译出来的代码比Vue 2更小、更快。此外，Vue 3 还采用了更快的响应式系统，通过Proxy代理对象实现更快速的响应式更新。
更好的TypeScript支持：Vue 3 将 TypeScript 集成进了核心库中，提供了更完整的类型推断和类型检查支持。
Composition API：Composition API 是 Vue 3 中最引人注目的新特性之一，它是一种新的组织组件代码的方式，可以更好地组织逻辑代码，避免了 Vue 2 中代码难以复用、难以维护的问题。
Teleport：Teleport是Vue 3新增的一种组件方式，可以将组件渲染到文档之外的位置，解决了Vue 2中的$portal组件中的局限性问题。
其他改进：Vue 3 采用了静态标记和弱标记等优化，对TypeScript和JSX的支持都得到了改善，还提供了更多的全局API和内置组件。
其次是简单的原理：
响应式系统：Vue 3中的响应式系统是基于Proxy对象实现的。每个组件都有一个响应式对象，当响应式对象中的数据发生改变时，会触发重新渲染。Vue 3的响应式系统具有更快的响应速度和更好的类型支持。
模板编译：Vue 3中的模板编译器采用了全新的设计，将模板编译成渲染函数，并对编译出来的代码进行了优化，以提高运行时的性能。
组件系统：Vue 3的组件系统基于Vue 2的组件系统，包括了组件生命周期、自定义事件、插槽等功能，并且新增了Composition API、Teleport等功能。
全局API：Vue 3新增了一些全局API，例如createApp、createComponent、createRouter等，这些API可以让开发者更加方便地创建和管理应用。
ElementPlus 的组件
el-container：用于布局的容器组件，类似于 HTML 中的 div，包含头部导航栏、页面主体和底部联系我们部分等其他组件，可以设置其高度、宽度等样式属性来调整布局效果。
el-header：用于显示页面的头部导航栏，可以设置其高度、背景颜色等样式属性来调整外观效果。
el-menu：用于显示导航栏菜单的组件，可以根据路由的变化自动高亮当前路由对应的菜单项。可以设置其模式、菜单项、样式等参数，比如 :default-active="$route.path" 可以将当前路由作为默认选中的菜单项。
<el-header style="text-align: center; width: 100%;"> <!-- 头部导航栏 -->
<el-menu :default-active="$route.path" mode="horizontal" router> <!-- 导航栏菜单 -->
<el-menu-item index="/***">NavName</el-menu-item> <!-- 菜单项，index为对应的路由路径 -->
</el-menu>
</el-header>router.index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
<!-- / 是默认第一个页面 -->
path: '/home',
name: 'HomePage',
component: Home
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import axios from 'axios';
import store from './store';
const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.use(store); // 将 store 对象传递给 app.use()
app.config.globalProperties.$http = axios;
app.mixin({
created() {
this.$router = router;
}
});
app.mount('#app');
el-main：用于显示页面的主体部分，通常用来放置路由组件的容器。可以设置其高度、背景颜色等样式属性来调整外观效果。
<el-main>
<!-- 下面一行就是随着路由跳转展示别的界面的内容了，APP.vue就像一个大背景，在前面换不同的演员演不同的戏就有不同的页面了 -->
<router-view></router-view>
</el-main>el-footer：用于显示底部联系我们的组件，可以设置其高度、背景颜色等样式属性来调整外观效果。
CSS 样式
margin: 0; padding: 0; 用于去掉页面默认的外边距和内边距。
width: 100%; height: 100%; 用于让 html 和 body 标签占据整个页面的宽度和高度。
overflow-x: hidden; 用于隐藏页面水平方向的滚动条。
font-family: Avenir, Helvetica, Arial, sans-serif; 用于指定字体，Avenir 为首选字体，如果不支持，则选择 Helvetica，如果还不支持，则选择 Arial，最后如果还不支持，则使用系统默认字体。
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 用于使字体看起来更加清晰，其中 -webkit-font-smoothing 用于 Chrome、Safari 和 Opera 浏览器，-moz-osx-font-smoothing 用于 Firefox 和 Safari（MacOS）浏览器。
text-align: center; 用于使元素的文本居中对齐。
css前加.和不加有什么区别
在 CSS 中，前缀 "." 表示这是一个 class 选择器，而不是 HTML 标签选择器。class 选择器用于选择具有特定类名的 HTML 元素，以便将一组 CSS 样式应用于这些元素。例如，如果你在 HTML 中使用了 class="my-class"，那么你可以使用 ".my-class" 选择器在 CSS 中为具有该 class 的所有元素定义样式。
而不加 "." 则表示这是一个标签选择器，它选择所有该标签的元素。例如，如果你使用 "body" 选择器，在 CSS 中为整个文档中的 body 元素定义样式，而不仅仅是具有特定 class 名称的元素。
(未完待续)
