- 博客(74)
- 收藏
- 关注
RSS订阅原创 Koa2项目实战3 （koa-body，用于处理 HTTP 请求中的请求体）
koa-body是一个用于 Koa 框架的中间件，它主要用于处理 HTTP 请求中的请求体。
2024-10-05 17:38:59
1098
原创 Koa2项目实战2（路由管理、项目结构优化）
路由：根据不同的URL，调用对应的处理函数。每一个接口服务，最核心的功能是：根据不同的URL请求，返回不同的数据。也就是调用不同的接口返回不同的数据。在 Node.js 中使用 Koa 框架添加路由可以通过以下几种方式实现：
2024-10-05 14:20:34
809
原创 Koa2项目实战1（项目搭建）
Koa 是一个基于 Node.js 的 Web 应用框架，由 Express 原班人马打造。Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助开发者快速地编写服务端应用程序。
2024-10-04 16:43:22
1015
原创 Electron 使⽤ electron-builder 打包应用
electron有几种打包方式，我使用的是electron-builder。虽然下载依赖的时候让我暴躁，使用起来也很繁琐，但是它能进行很多自定义，打包完成后的体积也要小一些。
2024-10-02 20:04:14
557
原创 Electron 进程通信
Electron 进程通信：IPC：全称是 InterProcess Communication ，即：进程间通信。IPC连接不同进程：在 Electron 应用中，主进程和渲染进程各自有不同的职责和运行环境。IPC是它们之间进行交互和协同工作的关键机制。没有有效的 IPC，主进程和渲染进程将无法有效地沟通和协调，导致应用功能受限。调用原生 API 的唯一途径：IPC 是 Electron 中最为核心的内容。IPC 是从 UI（通常在渲染进程中）调用原生 API 的唯一方法。这意味着如果想要在 El
2024-09-30 15:14:14
1261
原创 Electron 主进程与渲染进程、预加载preload.js
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点（主进程具有唯一性）。任何 Electron 应用程序的入口都是 main 文件，负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。主进程在 Node.js 环境中运行，它具有 require 模块和使⽤所有 Node.js API 的能力。主进程的核心：使用 BrowserWindow 来创建和管理应用程序窗口。
2024-09-29 12:18:30
1222
原创 Electron 使用 Nodemon 配置自动重启
在Electron项目中，每次修改了代码都需要手动关闭应用，再执行npm start重启应用。Nodemon 是一个非常实用的工具，主要用于在开发 Node.js 应用时自动监测文件的变化并重新启动服务器。
2024-09-28 19:36:50
714
原创 Electron 安装以及搭建一个工程
Electron 应用程序遵循与其他 Node.js 项目相同的结构。首先创建一个文件夹my-electron-app并在vscode 编译器中打开文件夹。
2024-09-28 15:52:44
1281
原创 electron介绍
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。Electron 本质上是一个运行在桌面操作系统上的运行时环境，它将 Chromium（一个开源的浏览器引擎）和 Node.js（一个基于 JavaScript 的服务器端运行时环境）结合在一起。这使得开发者可以在应用程序中同时使用前端的 HTML、CSS 和 JavaS
2024-09-24 16:32:34
1077
原创 vue3 组合式API defineEmits() 与 emits 组件选项
defineEmits() 和 emits组件选项在功能上都是用于声明组件可以向外触发的事件。它们的核心目的都是让组件明确地告知外界它能够发出哪些自定义事件，以此来规范组件间的通信。defineEmits()在 Vue 3 的组合式 API 中使用。emits组件选项 在Vue 2 及 Vue 3 的选项式 API 中使用。
2024-09-16 14:43:10
1379
原创 vue3 透传 Attributes
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。最常见的例子就是 class、style 和 id。
2024-09-15 17:15:28
1259
原创 vue3 内置组件 ＜Suspense＞
是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
2024-09-12 23:00:46
1377
原创 vue3 响应式API customRef()
使用ref()定义响应式数据：</</</importfrom'vue';constref'hello'</使用Vue提供的默认ref()定义响应式数据，当数据发生变化时，Vue 的响应式系统会自动检测到变化，并立即更新相关的页面部分。现在，实现如下图所示的需求：当在输入框输入123时，输入结束1秒后，页面才更新。将输入框与inputValue进行双向绑定，当用户在输入框中输入数字1input框的数据瞬间就改变了，在页面上用作展示的也就更新了。使用ref()
2024-09-11 18:17:47
966
原创 vue3 响应式API toRaw() 和 markRaw()
toRaw()根据一个 Vue 创建的代理返回其原始对象。toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
2024-09-11 16:29:17
372
原创 Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()
isRef()：检查某个值是否为 ref。isRef函数接收一个参数，即要判断的值。如果该参数是由ref创建的响应式对象，则返回true；否则，返回false。
2024-09-10 15:20:19
853
原创 vue3 内置特殊元素＜slot＞ 与 插槽 Slots
Vue 模板里的 元素会被编译到 JavaScript，因此不要与原生 元素进行混淆。 元素可以使用 name attribute 来指定插槽名。当没有指定 name 或者name="default"时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。
2024-09-10 13:45:44
1362
原创 vue3 响应式 API：shallowRef()和shallowReactive()
shallowRef()是一个用于创建浅层响应式引用的函数。它创建一个响应式数据，但只对顶层属性进行响应式处理。shallowReactive()是一个用于创建浅层响应式对象的函数。shallowReactive()创建的响应式对象是浅层的：只有对象的直接属性是响应式的，对象内部的嵌套属性不是响应式的。
2024-09-06 18:08:34
1442
1
原创 vue3 响应式 API：readonly() 与 shallowReadonly()
readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。shallowReadonly() 是 readonly() 的浅层作用形式，是一个用于创建浅层只读代理对象的函数。
2024-09-06 16:49:54
401
原创 vue3 组件通信方式
vue3 组件通信方式父传子propsv-model$refs默认插槽、具名插槽、动态插槽子传父propsv-model$parent自定义事件作用域插槽祖传孙、孙传祖$attrsprovide、inject兄弟间、任意组件间Piniamitt
2024-09-04 21:05:07
1125
1
原创 Vue3 官方推荐状态管理库Pinia
Pinia 是 Vue 官方团队推荐代替Vuex的一款轻量级状态管理库，允许跨组件/页面共享状态。Pinia 旨在提供一种更简洁、更直观的方式来处理应用程序的状态。Pinia 充分利用了 Vue 3 的 Composition API。
2024-09-02 16:33:38
986
原创 Vue Router
Vue是一个典型的SPA单页面应用框架。SPA单页面是指网站只有一个html页面，所有的页面切换都只在这个html页面中完成。不同组件的切换全部交由路由来完成。Vue Router 是 Vue.js 官方的客户端路由解决方案。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。Vue Router 基
2024-08-28 23:19:40
1315
原创 Vue3项目引入.ts文件报错：An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘
An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled.ts-plugin(5097)
2024-08-26 17:42:48
1366
原创 vue3 自定义hooks（组合式函数）
自定义hooks 是Vue3 组合式函数的别称。在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
2024-08-26 17:38:30
1981
原创 vue3 语法糖＜script setup＞
当使用时，任何在声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：< template > < div > {{ count }} < button @click = " increment " > 点击count+1 < script setup > import {
2024-08-22 22:00:10
1974
原创 vue3 内置的特殊属性ref
Vue 3 中的数据绑定是通过模板语法实现的。开发者可以在模板中使用特殊的语法来绑定数据，例如使用双花括号{{}}来显示数据，或者使用v-bind指令来绑定属性。当数据发生变化时，Vue 会自动更新绑定的数据在模板中的显示，实现页面的自动更新。虽然 Vue 的响应式数据驱动模式非常强大，但有时直接访问底层 DOM 元素是必要的。
2024-08-21 21:00:29
1332
原创 vue3 报错解决：找不到模块或其相应的类型声明。
[plugin:vite:import-analysis] Failed to resolve import...当我新创建一个vue3新项目，想从头复盘并记录这个错误时，在新项目的App.vue中引用Person.vue，没有任何报错！因此，建议各位同学在遇到这个问题的时候，首选解决方案是删除node_module文件夹，重新下载依赖。如果不能解决问题，再试试上面的办法。
2024-08-21 16:32:10
1478
原创 vue3 响应式 API：watch()、watchEffect()
语法:watch(变量名, (newValue, oldValue) => {})监视时直接写变量名，其本质上监视的是.value。< template > < div > < div > count: {{ count }} </ div > < button @click = " addCount " > 点击 count+1 </ button > </ div > </ template > < script setup lang = " ts " > import {
2024-08-20 22:26:40
1217
原创 vue3 响应式 API：computed()
computed()接收一个 getter 函数或者一个包含 getter 和 setter 函数的对象作为参数，并返回一个基于原始响应式数据计算得到的新的响应式数据对象。计算属性的值会根据其依赖的响应式数据自动更新，当依赖的数据发生变化时，计算属性的值也会自动重新计算。
2024-08-19 18:25:12
754
原创 vue3响应式工具 toRefs() 和 toRef()
直接解构响应式对象的属性进行赋值给新的变量，会导致新变量失去响应式。当修改新变量的值时，不会触发原始响应式对象的更新，从而在模板中也不会有相应的视图更新。示例：
2024-08-18 23:43:37
1228
原创 vue3 响应式 API：ref() 和 reactive()
若需要一个基本类型的响应式数据，必须使用ref()。若需要一个响应式对象，层级不深，ref()、reactive()都可以。若需要一个响应式对象，且层级较深，推荐使用reactive()。
2024-08-18 19:48:01
1815
2
原创 vue3 组合式 API：setup()
setup() 函数是在组件实例创建之前执行的，它用于组合组件的逻辑，包括响应式数据、方法、计算属性、监听等。它接收两个参数：props 和 context，并返回一个对象，其中包含可以在组件模板中使用的属性和方法。
2024-08-17 21:04:51
1139
原创 插件vite-plugin-vue-setup-extend
/ 使用插件后，可以直接导入 ref 和 reactive，无需显式从 'vue' 导入。是一个用于增强 Vue 3 在 Vite 项目中使用。插件可以通过扩展的方式，给。
2024-08-17 20:24:48
872
1
原创 TypeScript Mixins
Mixins 是一种软件设计模式，在 JavaScript 中用于实现代码复用和组合功能。它允许将多个不同的行为或特性组合到一个类中，而无需使用传统的类继承。通过 Mixins，可以从多个源获取功能，使代码更加灵活和可维护。
2024-08-16 11:12:03
515
原创 TypeScript 构建工具之 webpack
在实际开发中，直接使用TypeScript 编译器的情况不多。在项目中，需要使用构建工具对代码进行打包，不可能脱离项目使用TypeScript 编译器单独打包TypeScript。
2024-08-14 14:02:53
985
原创 TypeScript 编译选项 compilerOptions 全部配置项
示例：在这个例子中，当处理 JSX 代码时，TypeScript 编译器将使用名为 的函数作为工厂函数，而不是默认的 。示例：在这个例子中，当处理 JSX 代码时，TypeScript 编译器将从 模块导入用于处理 JSX 的函数或对象，而不是默认的 React 库。示例：在这个例子中，TypeScript 编译器将在全局命名空间中查找名为 ""的对象来识别 React 相关的功能。示例：在这个例子中，TypeScript 编译器将从当前目录下的 目录开始查找源文件。项目结构如下： 配置：在
2024-08-12 19:02:57
2323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人