lryh_的博客

在 Vue 3 项目中同时适配 PC 和移动端，结合 响应式布局、动态组件加载 和 设备检测 来实现。DesktopLayout 或 MobileLayout。main.js这引入global.css。在 App.vue 中根据设备类型。

（@media）， 根据屏幕宽度动态调整组件的样式，从而实现一套代码适配 PC 和移动端。只写一套组件同时适配 PC 和移动端，通过。弹性布局 Flexbox 、Grid。没有Vue3项目，创建一个项目。

将主题内容放在 global.css 文件中，并使用 CSS 变量和 data-theme 属性来定义主题样式，使用 Pinia 进行全局状态管理，使用pinia-plugin-persistedstate 插件本地持久化，最终实现主题切换。：使用 Pinia管理主题切换，通过修改 document.documentElement 的 data-theme 属性来切换主题，将主题持久化。在根组件中初始化主题 ：App.vue 中，使用 Pinia来管理主题切换。的，刷新页面后内存状态会被重置。

返回值: reactive 直接返回一个响应式代理对象，（如 string、number、boolean 等），但它也。用途: reactive 用于创建一个。，访问或修改数据需要通过 .value 进行。用途: ref 通常用于创建一个。返回值: ref 返回一个带有。或需要明确访问 .value 的场景。使用场景: 适合处理。

专为 Vue 设计的水印组件，可添加文本或图片水印。创建一个水印组件 WatermarkIndex.vue。在页面中引入 水印组件。

经过以上配置，可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示。craco.config.js ，内容如下。提示：找不到模块‘path’，需安装。包文件中配置启动命令和打包命令。项目根目录下创建文件。

token 存储，token失效

v-if ：1、控制元素是否渲染到页面2、 通过直接操作DOM树的添加或移除来达到看到或看不到效果v-show：1、控制元素是否显示（已经渲染到页面）2、通过控制css中的display属性来达到看到或看不到建议：频繁要控制显示 隐藏用v-show如果一次性决定或没有某个元素，可以用v-if...

VueRouter 是Vue.js官方路由插件，与Vue.js深度集成，用于构建单页面应用。构建的单页面是基于路由和组件，路由设定访问路径，将路径与组件进行映射。VueRouter有两中模式 ：hash 和 history ，默认是hash模式。原理：更新视图不会重新请求页面hash: url中有# ，#和#后面的都是hash，发送http请求后，不会在http中显示#及#后面的window.location.hash读取hash 不会重加载页面。

离开被缓存的A组件 进入被缓存的B组件，会触发A组件的 deactivated ，则第一次进入被缓存的B组件 会触发beforeCreate ==>created ==>beforeMount ==>A组件的deactivated ==>mounted ==>activated。第一次进入被缓存的组件A 会触发beforeCreate ==>created ==>beforeMount ==>mounted ==>activated。可以缓存组件，也可以缓存路由。

具名插槽 作用域插槽

beforeRouteUpdate

允许你在组件中定义多个插槽，并为它们命名。：如果没有提供具名插槽，插入的内容会放入默认插槽。安装 element-ui。main.js 导入。

安装 element-ui。在父组件中使用弹框组件。main.js 导入。

Vue 3 通过Proxy和Reflect实现了更为高效和灵活的响应式数据系统。使用ref和reactive创建响应式数据，并结合effect函数进行依赖收集和触发更新，从而实现了双向数据绑定。相比于 Vue 2，Vue 3 的响应式系统在性能和功能上都有了显著提升。

el-select v-model="form.ispId" placeholder="请选择运营商" clearable @clear="handleClear" ><el-form-item label="运营商">// 根据 ispId 获取名称。

压缩和优化资源：使用工具如 Terser 压缩 JavaScript，使用 vue-cli-plugin-compression 或类似工具压缩静态资源，优化图片大小。优化 CSS 和 JavaScript 执行：尽量减少 CSS 和 JavaScript 的阻塞时间，将非关键 CSS 和 JavaScript 延迟加载或异步加载。预加载和预取：使用 <link rel="preload"> 和 <link rel="prefetch"> 标签来提前加载或预取关键资源。

Vue 更新DOM是异步执行的，修改数据后，视图不会立即更新，会等同一事件循环中的所有数据都变化后再统一更新视图，如果想修改数据 立即就能对修改后的视图进行操作 可以使用$nextTick。获取最新DOM状态：在数据变化后，可使用$nextTick能确认DOM已经更新，然后再进行相关操作。执行延迟操作：所有的DOM更新 和 计算完成后，再进行一些操作，可以用$nextTick。操作DOM元素：数据变化后，立即对修改后的DOM元素进行操作。// 等待 DOM 更新完成后执行操作。

【代码】Element-ui :el-table 中表尾合计行。

类型“RouteRecordName”上不存在属性“includes”。 类型“symbol”上不存在属性“includes”

将一个字符串作为索引访问一个类型为 "{}" 的对象时引发的。这是因为 "{}" 表示空对象类型，它没有定义任何属性，因此无法用字符串作为索引进行访问。tempForm: {} as {[key: string]: any} // 将对象的类型更改为具有字符串索引签名的类型。将对象的类型更改为具有字符串索引签名的类型。是字符串索引签名，表示可以使用字符串作为索引访问此类型的对象。id 是字符串，作为tempForm 对象的索引 引起的。

由于动态路由加载的状态未被 Vue Router 及时更新导致的。或主布局文件中，添加。属性来强制组件重新渲染。

在开发环境中，可以通过配置开发服务器的代理功能，将请求代理到后端服务器。这样浏览器认为请求是同源的。target: 'https://example.com', // 后端服务器地址。确保后端服务器允许跨域请求。可以在服务器的响应头中添加 CORS 相关的头信息。withCredentials: true // 允许携带cookie等信息。有一些第三方库可以帮助处理文件上传并且支持跨域请求，比如。在 Vue CLI 项目中，可以在。// 处理文件上传逻辑。

获取 canvas 元素的getContext方法时，canvas 元素尚未正确绑定。可以通过确保在渲染 PDF 文件之前，canvas 元素已经正确挂载到 DOM 来解决这个问题。

使用 pdfjs-dist 渲染 PDF 文件报错Error: No "GlobalWorkerOptions.workerSrc" specified.