10 2021 档案
摘要：一、@rollup/plugin-inject 插件作用 这个插件的作用是：扫描模块代码，找到需要替换的全局变量，同时通过Import注入变量。比如：针对全局使用的Promise的地方：Promise.resolve(1);我们想要通过自己的某个polyfill来模拟该行为，比如用es6-promi
阅读全文
摘要：一、环境变量配置 在项目开发中我们需要配置环境变量：开发环境，生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的，vue/cli 3.0相对简单，只需要在项目根目录创建 .env 文件即可。以下是环境对应文件名和命令 模式 对应npm命令 对应文件名称 develo
阅读全文
摘要：一、reactive 创建的响应式对象解构后为什么会失去响应式 Vue 拥有一个响应式系统，可以让它在数据更新的时候自动进行视图的更新。在Vue3.0中，可以使用 reactive 声明响应式状态。文档说不要解构 reactive 创建的响应式对象，为什么？因为会失去响应式的功能，那为什么会失去，我
阅读全文
摘要：想在你的Vue组件之间共享代码？如果你熟悉 Vue 2 则可能知道使用 mixin ，但是新的 Composition API 提供了更好的解决方案。在本文中，我们将研究 mixins 的缺点，并了解 Composition API 如何克服它们，并使Vue应用程序具有更大的可伸缩性。 一、Mixi
阅读全文
摘要：一、问题背景 vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择 <el-form ref="service" :model="service" label-width="80px"> <el-form-item label="名称"> <el-input v
阅读全文
摘要：一、使用reactive函数声明数组如何正确赋值 需求：将接口请求到的列表数据赋值给响应数据 array const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，
阅读全文
摘要：一、问题背景 Java 后端使用了 PageHelper 分页插件来进行分页查询，但是发现有个方法分页不生效，总是返回的是全部数据。 后来查了相关文档找到了问题原因如下。 二、不分页的几种情况 1、版本过低的问题 问题：pagehelper没有效果，一直不能分页问题 解决方法：引用其他博主的博客的解
阅读全文
摘要：一、TypeScript 泛型 软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的
阅读全文
摘要：一、TypeScript 函数 1、TypeScript 函数与 JavaScript 函数的区别：我们主要看一下不同的 TypeScript 函数：函数有类型、函数有返回值类型、参数有类型、有必填和可选参数、有函数重载 JavaScript 函数：函数无类型、函数无返回值类型、参数无类型、所有参数
阅读全文
摘要：一、类型守卫 类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。 换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。目前主要有四种的方式来实现类型保护： 1、in
阅读全文
摘要：一、警告：warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any 解决方案：关闭any类型的警告。 // 在 .eslintrc.js文件中找到rules 添加一行代码即可 "@types
阅读全文
摘要：一、composition Api compositon Api的本质体现在代码里面，也就是一个setup函数，在这个setup函数中，返回的数据，会用到该组件的模板中。return的这个对象，一定程度上，代表了之前vue2中的data属性。 这时候，对于大多数初学者来说，可能存在的疑惑就是，那么我
阅读全文
摘要：一、const 和 readonly 的区别 1、TypeScript 中不可变量的实现方法有两种： 使用 ES6 的 const 关键字声明的值类型 被 readonly 修饰的属性 2、TypeScript 中 readonly： TypeScript 中的只读修饰符，可以声明更加严谨的可读属性
阅读全文
摘要：Componsition API 是 vue3 的一个很大的更新，也是很大的一个优点。为什么要更新呢？肯定是 vue2 的 Options API 有问题，本文就两者的区别做个介绍。 一、vue2 的 Options API 1、Options API - 又叫选项API 在 VUE2 中我们是如何
阅读全文
摘要：一、使用与不使用 script setup 的对比 1、不使用 script setup 的繁杂性 我们之前的组件可能是这样的： <template> <div> <Card>{{msg}}</Card> </div> </template> <script lang="ts"> import {
阅读全文
摘要：一、Vue3.x 应用配置 config：包含Vue应用程序全局配置的对象，在挂载应用之前配置相应的属性。 const app = Vue.createApp({}); app.config = {...}; 1、devtools（类型：Boolean，默认：true） 概述：配置是否允许开启vue
阅读全文
摘要：Teleport 是什么？它解决的是什么问题？ 一、使用场景 - 为什么我们需要 Teleport Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。 1、使用场景： 业务开发的过程中，我们经常会封装一些常用的组件，例如 Modal 组件。相信大家在使
阅读全文
摘要：一、setup setup是组合Composition API中的入口函数，也是第一个要使用的函数。 1、setup只在初始化时执行一次，所有的Composition API函数都在此使用。 2、setup是在beforeCreate生命周期之前执行的(只执行一次) beforeCreate() {
阅读全文
摘要：vue-class-component 是 vue 的官方库，作用是用类的方式编写组件。这种编写方式可以让 .vue 文件的 js 域结构更扁平，并使 vue 组件可以使用继承、混入等高级特性。 vue2.x 对 TS 的支持并不友好，所以 vue2.x 跟 TS 的整合，通常需要基于 vue-cl
阅读全文
摘要：关于其构建过程理解，主要学习这篇文章：https://blog.csdn.net/qq_40882724/article/details/116860994 一、三个概念 首先，要理解三个重要的概念： （1）webpack构建：一个独立项目通过 webpack 打包编译而产生资源包。 （2）remo
阅读全文
摘要：一、如何共享模块 1、NPM 方式共享模块 想象一下正常的共享模块方式，就是 NPM。正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线。 对于项目 A 与 B，需要共享一个模块时，最常见的办法就是将该模块抽成通用依赖并分别安装在各自项目中。 2、微前端方式共享模
阅读全文
摘要：一、什么是微前端？ 微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一个 SPA 单页应用，随着时间累加，前端团队维护的 SPA 会随着业务增长越来越大，变得难以维护（项目启动耗时、CI\CD 耗时等）; 微前端可以帮助我
阅读全文
摘要：一、vue-cli 创建项目报错 我想用 vue-cli 4.5 创建一个 vue3 项目，但由于我之前的 node npm 之类的都是很早之前就安装的，所以出现了这样报错： You are using an outdated version of NPM. there may be unexpec
阅读全文
摘要：一、nvm 是什么 nvm 全名 node.js version management，是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs，主要解决 node 各种版本存在不兼容现象。 在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不
阅读全文
摘要：一、vue-cli 安装遇到问题 安装新版 vue-cli 命令：npm install -g @vue/cli，安装成功之后使用 vue -V 检查版本号，发现报错： PS D:\Program\nodejs\node_global> vue -V internal/modules/cjs/loa
阅读全文
摘要：我的 vue-cli 还是 2.9.6，想建个 vue3 项目但是需要 vue-cli 4.5.0 以上，因为开始升级 vue-cli 之旅。 使用 npm install -g @vue/cli 升级显示成功之后，查看 vue -V 还是 2.9.6，不知道什么原因。后来查到说需要先卸载旧版本，再
阅读全文
摘要：问题背景来自于这篇文章《如何搞定Banner背景自动换色的功能？》- https://mp.weixin.qq.com/s/c3lv_OjSsUl8365WepOMhw 一、CSS 提取图片主题色功能探索 一种纯 CSS 实现的方案。在《小技巧！CSS 提取图片主题色功能探索 - https://w
阅读全文
摘要：H5 标准新增的本地存储 localStorage 已经很熟悉了，但是还有个 storage 事件监听确实比较陌生，这个事件可以通过更新 localstorage 来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！下面我们就来具体了解一下： 一、Storage事件介绍 1、stora
阅读全文
摘要：BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。下面我们来简单了解一下： 一、Broadcast Channel 是什么 1、首先，我们想一个问题：在前端如何
阅读全文
摘要：一、hash、hashchange 事件介绍 1、hash 是什么？ hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点： 使用浏览器访问网页时，如果网页URL中带有hash，页
阅读全文
摘要：一、window下自带的 name 属性 不知道大家有没有发现这样一种情况：在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined；但是偏偏就个别特例，就是name属性。 其实 window 自身就带有 name 这个属性，在控制台输入window可以
阅读全文
摘要：在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。 正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状
阅读全文
摘要：postMessage 是 html5 引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。 一、Window postMessage() 方法介绍 po
阅读全文
