vue3+ts报错：Cannot find module '@/views/Home/index.vue' or its corresponding type declarations.

方式一：在使用 vue3+typescript 添加路由引入路径的时候报错：在 vite-env.d.ts 中添加：declare module "*.vue" { import { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }通过以上方式可以取消报错爆红，但是当点击路径的时候跳转地址不正确。方式二：在 tsconfig.jsdon 中添加配置："compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] } }

技术 · 5 天前

Cannot find module ‘path‘ or its corresponding type declarations.

在 .ts 文件上引入 path 模块的时候报错：import { resolve } from 'path'主要原因是 path 是一个 node.js 模块，node.js 本身不支持 typescript，为了解决这个问题需要安装一个 @types/node。npm install @types/node -D在引入文件的时候，如 "@/user" 按理我们需要引入 user 目录中的 index.ts 文件，但是在使用 TypeScript 时通常需要使用模块路径别名（Module Path Aliases）来简化文件引入的路径。// tsconfig.json { ..., "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] }

技术 · 5 天前

Python 3 错误处理：缺少 libpython3.6m.so.1.0

错误描述当运行 Python 3 时遇到以下错误：python3: error while loading shared libraries: libpython3.6m.so.1.0: cannot open shared object file: No such file or directory这个错误表明系统找不到 libpython3.6m.so.1.0 这个共享库文件。原因分析缺少 libpython3.6m.so.1.0 的原因可能有以下几种：未安装 Python 3.6 的开发包：libpython3.6m.so.1.0 是 Python 3.6 的共享库文件，通常包含在 Python 3.6 的开发包中。如果没有安装 Python 3.6 的开发包（例如 python36-devel），系统中就不会有这个文件。手动编译 Python 3.6 时未启用共享库：如果手动编译了 Python 3.6，但没有使用 --enable-shared 选项，编译过程不会生成共享库文件。系统路径配置问题：即使安装了共享库文件，如果系统路径配置不正确，系统也可能找不到这个文件。例如，L

技术 · 15 天前

ModuleNotFoundError: No module named ‘psutil‘ 报错处理

缺少 psutil 模块解决方式，安装 psutil 模块pip install psutil原因：项目依赖：在自身的项目中没有直接使用到 psutil 模块的情况下，可能是因为项目依赖的其他库或模块需要 psutil 作为依赖项。例如，某些监控、性能分析或系统管理工具可能会依赖 psutil 来获取系统信息。环境配置问题：可能是由于环境配置不完整或不一致导致的。例如，在不同的开发环境或生产环境中，某些依赖项可能没有正确安装或版本不匹配。依赖冲突：在某些情况下，不同的库可能依赖于不同版本的 psutil，导致在安装或运行时出现冲突。手动删除或误操作：有时，psutil 模块可能被手动删除或误操作导致缺失。虚拟环境问题：如果在使用虚拟环境，可能是因为虚拟环境中没有正确安装 psutil 模块，或者在激活虚拟环境时没有正确加载依赖项。

技术 · 15 天前

Nuxtjs3+ElementPlus 提示：[IdInjection] Looks like you are using server rendering, you must provide a id...

根据提示可以看出需要提供一个id。文档：https://element-plus.org/zh-CN/guide/ssr.html#%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AAid代码：// plugins/ElementPlus.ts import { defineNuxtPlugin } from '#app' import ElementPlus, { ID_INJECTION_KEY } from 'element-plus' import 'element-plus/dist/index.css' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.provide(ID_INJECTION_KEY, { prefix: 1024, current: 0 }) nuxtApp.vueApp.use(ElementPlus) })

技术 · 17 天前

Nuxtjs3 + ElementPlus 提示：[Vue warn]: injection "Symbol(elZIndexContextKey)" not found.

需要配置配置 ZIndex使用SSR进行开发时，会遇到 z-index 引起的水合错误。 在这种情况下，建议注入一个初始值以避免这种错误。文档：https://element-plus.org/zh-CN/guide/ssr.html#%E9%85%8D%E7%BD%AE-zindex代码：// plugins/ElementPlus.ts import { defineNuxtPlugin } from '#app' import ElementPlus, { ZINDEX_INJECTION_KEY } from 'element-plus' import 'element-plus/dist/index.css' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.provide(ZINDEX_INJECTION_KEY, { current: 0 }) nuxtApp.vueApp.use(ElementPlus) })

技术 · 17 天前

ua-parser-js 解析用户设备信息

介绍ua-parser-js 是一个轻量级的 JavaScript 库，用于解析用户代理字符串，以获取有关用户的操作系统、浏览器类型、版本、设备类型等信息。GitHub文档使用npm 下载npm install ua-parser-js引入import UAParser from 'ua-parser-js'; const parser = new UAParser('[user-agent]'); // 如果不填写会自动获取当前页面上的ua const result = parser.getResult(); console.log(result);返回结果{ ua: "", browser: { name: "", version: "", major: "", type: "" }, engine: { name: "", ver

技术 · 10-21

python openai 流式数据返回

from openai import OpenAI def client_chat(): client = OpenAI(api_key=os.getenv("API_KEY"), base_url="https://xx.xx.xx") response = client.chat.completions.create( model="deepseek-chat", messages=[ {"role": "system", "content": "You are a helpful assistant"}, {"role": "user", "content": "Hello"}, ], stream=True )

技术 · 09-05

textarea文本高度自定义-组件开发[textarea]

textarea 在开发中常常被使用到，但默认的 textarea 效果并不能满足我们的需求，比如信息发送框，如果直接使用 input 的话，在长文本内容中会显得十分拥挤，如果直接使用 textarea 则在未填充内容时显得过于空旷，因此我们需要自定义 textarea 的样式，使其在未填充内容时也能保持一定的宽度，同时也能在长文本内容中自动换行并调整高度。效果如下：这里主要通过监听 textarea 的 input 事件，从而获取 textarea 的内容区域高度，从而调整 textarea 的高度，实现文本内容超出宽度时高度调整的效果。代码示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t

技术 · 07-30

Script 标签引入 Monaco Editor

将 monaco-editor 下载到本地，地址：https://microsoft.github.io/monaco-editor/目录结构：代码示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./monaco-editor-0.50.0/package/min/vs/editor/editor.main.css"> </head> <body> <div id=&quo

技术 · 07-29

＂urllib3 v2.0 only supports OpenSSL 1.1.1+, currently ＂ ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ＇ssl＇

＂urllib3 v2.0 only supports OpenSSL 1.1.1+, currently ＂ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ＇ssl＇ module is compiled with ＇OpenSSL 1.0.2k-fips 26 Jan 2017＇. See: https://github.com/urllib3/urllib3/issues/2168requests 指定安装版本pip install requests==2.6

技术 · 06-28

Shadow DOM：Web 组件的封装与控制

介绍Shadow DOM 是 Web 组件规范的一部分，它允许将封装的“影子” DOM 树附加到常规 DOM 树中的元素。影子 DOM 封装了 DOM 和样式，使开发人员可以控制这些元素，而不会与页面上的其他代码或样式发生冲突。术语影子宿主（Shadow host）：影子 DOM 附加到的常规 DOM 节点。影子树（Shadow tree）：影子 DOM 内部的 DOM 树。影子边界（Shadow boundary）：影子 DOM 终止，常规 DOM 开始的地方。影子根（Shadow root）：影子树的根节点。创建 Shadow DOMconst host = document.querySelector('#host') // 创建一个 Shandow DOM 元素 const shadow = host.attachShadow({mode: 'open'}) const span = document.createElement('span') span.textContent = 'Hello World' // 向 Shadow DOM 元素内填充内容 shadow.a

技术 · 06-23
Shadow DOM：Web 组件的封装与控制

JS逆向之模拟浏览器环境：使用jsdom在Node.js中执行JavaScript代码

在做JS逆向时常常会遇到需要模拟浏览器环境的情况，比如需要获取浏览器的location、document对象等。当然，如果只是类似获取 location 对象中的某个值的话，我们可以直接在浏览器端将参数值都复制过来。但是，如果需要对 document 进行操作那么就无能为力了，此时就需要使用到一个 NodeJS 包：jsdom。jsdom 是一个 NodeJS 包，它可以在 NodeJS 环境中模拟浏览器环境，包括创建一个 window 对象、document 对象等。使用 jsdom 包，我们可以创建一个虚拟的浏览器环境，然后在该环境中执行 JS 代码，从而实现对 document 对象的操作。安装npm install jsdom使用 const { JSDOM } = require('jsdom'); const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>'); const window = dom.window;

技术 · 05-15

实现Python与JavaScript的互操作：execjs模块详解

execjs 能够让你在 Python 环境中运行 JavaScript 代码。它提供了一个接口，可以使用各种 JavaScript 运行时引擎来执行 JavaScript 代码，包括 NodeJS、PhantomJS、PyV8等。安装pip install PyExecJS运行 js 代码import execjs # js 代码 js_code = """ function add(x, y) { return x + y; } """ # 创建一个 JavaScript 运行环境 ctx = execjs.compile(js_code) # 在 JavaScript 运行环境中调用 JavaScript 函数 result = ctx.call("add", 3, 5) # JavaScript 代码返回参数 print(result) # 输出：8call 方法：第一个参数为需要调用的 JavaScript 函数名后续参数为函数的传参切换运行环境import execjs #

技术 · 05-15

python让.bat文件加载虚拟环境中的依赖

@echo off REM 指定要使用的 Python 解释器路径 set "PYTHON_EXE=.\venv\Scripts\python.exe" REM 使用指定路径的 Python 解释器执行脚本 "%PYTHON_EXE%" main.py pause

技术 · 04-22

user-agent大全，python随机获取ua

import random user_agent = [ "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60", "Opera/8.0 (Windows NT 5.1; U; en)", "Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.50", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50", "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.1

技术 · 04-16

typescript 通过 import 方式导入 .json 格式数据

有时在 .ts 文件中需要通过 import config from 'config.json' 方式来导入写在 json 中的配置信息。我们需要在 tsconfig.json 文件中开启一下配置：{ "compilerOptions": { "resolveJsonModule": true } }

技术 · 04-13

使用 pinia 时遇到的报错问题（1）：“getActivePinia was called with no active Pinia. Did you forget to install pinia?“

使用 pinia 时遇到的报错问题：“getActivePinia was called with no active Pinia. Did you forget to install pinia?“，此错误通常是在没有注册pinia时就使用了pinia时产生的报错信息可能你会觉得我已经在 main.ts 中注入了 pinia 了啊？怎么还是报错呢？这可能是你在使用 pinia 时不规范，如下面代码：// src/hooks/useUser.ts import { useUserStore } from '@/store' const user = useUserStore() export function useUser() { const userName = user.name return {} }有经验的同学可能已经注意到了上面代码的问题所在，这里在 pinia 没有注册的时候就直接 const user = useUserStore() 了，这显然是不对的。正确的做法是：// src/hooks/useUser.ts import { useUserSt

技术 · 04-05

使用EJS模板引擎在Express中动态生成内容的指南

什么是模板引擎模板引擎是一种用于动态生成HTML、XML等内容的工具或框架。它允许开发者将数据与HTML模板结合，以生成最终的页面内容。通常，模板引擎会使用一种特定的语法来表示动态数据和逻辑，然后将这些模板与实际数据进行渲染，生成最终的输出。模板引擎的主要作用是简化动态内容的生成过程，并提高页面的可维护性。它们通常支持一些基本的逻辑控制，如条件判断和循环，以便根据不同情况生成不同的输出。常见的模板引擎包括Mustache、Handlebars、EJS等，它们各自具有不同的特性和语法。ejs 简介ejs（Embedded JavaScript templating）是一种流行的模板引擎，支持在nodejs和浏览器环境上使用。它允许开发者使用JavaScript代码嵌入HTML模板中，以便根据需要动态生成内容。ejs 的语法简单易懂，类似于普通的HTML标记，但可以使用<%= %>标签来插入JavaScript代码，<% %>标签来执行JavaScript代码，以及<%- %>标签来插入未经转义的HTML内容。这使得ejs非常灵活，可以方便地处理各种动态

技术 · 03-08

NVM 安装与配置指南

简介Node Version Manager（NVM）是一个常用的 Node.js 版本管理工具，可用于在开发过程中方便地切换不同版本的 Node.js。通过 NVM，用户可以根据项目需求选择不同的 Node.js 版本，而无需手动安装和卸载多个版本的 Node.js。安装注意：为了避免版本冲突和环境混乱，在安装 nvm 之前先卸载之前安装的 Node.js。删除 node.js 相关的目录。查看 C:\Users\用户名 目录下是否拥有 .npmrc、.yarnrc 等都要进行删除。查看环境变量中是否拥有关于 node.js 相关的配置也要进行相应的删除。nvm 下载地址1. 选择 nvm 安装路径2. 选择 node.js 安装路径3. 之后就是一直 next4. 检测是否安装成功通过 nvm version 命令查看版本号nvm version配置安装 node1. 查看可安装 node 版本nvm list available2. 安装相应的 node 版本nvm install xx.xx.xx3. 查看已安装 node 版本nvm list目前已经安装了指定版本的 node

技术 · 03-08

JavaScript 中 call、apply 和 bind 方法详解及使用示例

call函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。语法：function.call(context, arg1, arg2, ...)示例：const obj = { name: '小明', greeting: function(text) { console.log(`${text}, ${this.name}!`) } } obj.greeting('你好'); // 输出：你好, 小明! const person = { name: '小红' } obj.greeting.call(person, '你好'); // 输出：你好, 小红!这里将 obj.greeting 方法中的 this 绑定到 person 对象上，因此对应的读取 person 中的 name。applyapply 和 call 一样也是函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。唯一不同的地方是是参数形式不同，capply 需要通过数组的方式进行传递。语法：function.apply(conte

技术 · 03-04

pnpm：优化依赖管理、提升性能的全新包管理利器

简介pnpm（performant npm）在 2017 年正式发布，定义为快速的，节省磁盘空间的包管理工具，开创了一套新的依赖管理机制。优势在介绍 pnpm 的优势之前，先来了解一下在以前 npm 和 yarn 的一些问题。早期的 npm1、npm2 主要是采用简单的依赖递归方式，造成了高度的依赖嵌套，此时就造成了以下问题：重复依赖嵌套地狱：重复大量的依赖嵌套，增加文件体积，造成了磁盘空间的浪费，使得安装速度过慢。文件路径过长：window 系统下，路径过长会导致爆错，最多260多个字符。之后 npm3 采用扁平化的方式，将依赖提升到根目录，解决了路径过长的问题，但是也带来了新的问题：扁平化依赖算法耗时长幻影依赖（Phantom dependencies）：由于扁平化的方式使得依赖提升到了根目录，此时项目中的 package.json 并没有记录某个依赖，但是却能够在项目中使用，此时就造成了幻影依赖。幻影依赖可能会导致依赖之间的兼容问题，导致项目不能正常运行。不确定性（Non-Determinism）：由于依赖提升只能提升一个，如 A包安装B@1，C包和D包安装B@2，此时一个B依赖

技术 · 03-03

JavaScript API：深入了解 FileReader 对象：使用示例、属性、方法和事件详解

简介FileReader 对象提供了读取文件内容的，它允许网页通过异步方式读取用户计算机上的文件内容。属性error在读取文件的过程中发生错误时，该属性包含一个错误对象。readyState表示 FileReader 状态的数字，表示以下值之一：0 (EMPTY)：尚未初始化。1 (LOADING)：正在读取。2 (DONE)：已完成读取。result返回读取文件的 ArrayBuffer、Blob、DataURL 或 Text 格式。方法abort()取消读取操作。在返回时，readyState 属性为 DONE。readAsArrayBuffer(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中就包含一个 ArrayBuffer 对象。readAsBinaryString(blob) 【已弃用】开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。readAsDataURL(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串

技术 · 03-01

nestjs安装@nestx-log4js/core时报错

报错信息：npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: nest-app@0.0.1 npm ERR! Found: @nestjs/common@10.3.3 npm ERR! node_modules/@nestjs/common npm ERR! @nestjs/common@"^10.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @nestjs/common@"^7.0.0" from @nestx-log4js/core@1.5.1 npm ERR! node_modules/@nestx-log4js/core npm ERR! @nestx-log4js/core@"*" from the root pr

技术 · 02-29
2023 - 2024 a博客-个人博客-技术分享. All Rights Reserved.
Theme Jasmine by Kent Liao