晨曦博客

解决方案：

需求分析使用 和 实现动画效果使用nameSearch 组件复用computed 计算属性理解watch 监听属性理解watch。

理解hooks 就是将去改变一个参数值时，页面也会更新对应的值的想法、抽象，用代码实现的地方。

布局功能。

在上面的示例中，我们在`<style vars>`块中定义了一个CSS变量`--bg-color`。然后，在组件的模板中，我们通过绑定`:style="`--bg-color: ${bgColor}`"`将`bgColor`变量绑定到样式中的`--bg-color`变量上。同时，在`<h1>`标签中，我们使用`var(--bg-color)`来引用并使用该CSS变量。当按钮被点击时，`bgColor`变量会在`red`和`blue`之间切换。这使得我们可以更方便地根据条件或用户输入来改变组件的样式。

在组件的模板中，我们通过绑定`:value="modelValue"`将`modelValue`属性绑定到`input`元素的`value`属性上。在`handleChange`方法中，我们使用`$emit`方法触发了`update:modelValue`事件，并传递了`input`元素的值作为参数。在上面的示例中，我们在`MyComponent`组件上使用了`v-model="message"`，从而实现了将`message`属性双向绑定到`MyComponent`组件的`modelValue`属性上。

在Vue 3中，可以使用`defineEmits`函数来定义组件的事件。`defineEmits`函数接受一个对象作为参数，该对象的键是事件名，值是一个回调函数或一个函数数组。在上面的示例中，我们使用`defineEmits`函数定义了一个名为`myEvent`的事件。然后，在组件的方法中，我们使用`$emit`方法触发了`myEvent`事件，并传递了一个字符串参数。通过使用`defineEmits`函数，我们可以明确地列出组件支持的事件，并提供类型推断和文档化的好处。

什么是 tree shaking？Tree shaking是一种优化技术，用于减少JavaScript或其他编程语言中未被使用的代码的体积，从而提高应用程序的性能和加载速度。它的原理是通过静态分析代码，识别出未被引用的模块和代码块，并将其在编译过程中移除无用的资源,包括JS代码、CSS文件实现方法：使用了es6语法importexport。

使用post-css实现移动端适配。介绍移动端适配以及适配方案。介绍post-css。

客服端：拦截请求响应数据服务端：拦截请求返回数据。

与其他打包工具（如 Webpack）不同，Rollup 更注重于创建小型、高效的打包文件，适用于构建库、框架和组件等应用场景。Rollup 采用 ES6 模块的标准语法，可以将代码转换为标准的 ES5 语法，并且支持 Tree Shaking 特性，可以识别并删除未使用的代码，使打包后的文件更小、更高效。使用 Rollup 打包代码可以提供更小的文件体积和更好的性能，同时还可以通过插件系统扩展其功能，例如添加压缩插件来进一步减小文件体积。通过反向代理服务器分配不同标识进行访问，不同的域服务端。

单页面应用（又叫SPA）：不刷新而切换页面某部分，实际是切换页面里的部分内容。单页面应用路由：实际表示应用页面的状态pathname（history api） 或 hash（url中#后面的部分）用来记录路由一个url对应一个路由路由就是表示页面的状态，一般用url的 pathname 或者 哈希#带着后面的部分 来表示。

介绍 - Vant 4 (vant-ui.github.io)Vant 是一个轻量、可定制的移动端组件库。

Vite是一个现代化的前端构建工具，专为快速开发现代Web应用而设计。它与传统的构建工具不同，采用了一种全新的开发模式，旨在提供更快的冷启动、热模块替换和按需编译的能力。Vite的主要特点包括：快速的冷启动：Vite利用ES模块的特性，在开发环境下将每个模块作为单独的文件处理，而不是将它们打包到一个文件中。这样，在启动项目时，Vite只需要进行少量的初始化工作，大大缩短了冷启动时间。真正的按需编译：Vite只会编译当前正在开发的文件，而不是整个项目，这种按需编译的方式极大地提高了开发过程中的编译速度。

使用执行的命令就可以运行创建的项目了。