vue3+ts项目记录

使用vue3+ts封装一个自动补全输入框Autocomplete组件

创建一个名为Autocomplete.vue的文件，在这个组件中，使用了Vue3的CompositionAPI，包括ref、watch、onMounted等。组件接收placeholder、debounce和clearable作为props，并根据这些props来渲染输入框和下拉菜单{{item}}import{defineComponent,ref,watch,onMounted}from'vu

温暖前端·2024-09-07 00:22

vue3+ts封装类似于微信消息的组件

组件代码如下：{{duration}}'' {{duration}} ''import{ref,computed,withDefaults,onBeforeUnmount}from"vue";//使用withDefaults提供默认值constprops=withDefaults(defineProps(),{isSent:false,iconColor:"#000000",b

月伤59·2024-09-06 23:47

vue3+ts封装一个uniapp的自动滚动列表，实现看板效果

电视机上要以列表展示数据，并且数据会实时更新，电视机不能点击，所以考虑自动播放的一个效果。展示方案有两种：1、列表上下自动滚动实现轮播效果。（此时具体滚动的高度由用户自己决定，每次滚动几条数据）2、列表以“页”的形式做成轮播图的翻页效果。由于项目的电视机是有任务提示作用的，最后考虑做成第一种方案，用户能更清晰了解任务安排和数据的更新。搜索之后了解到vue-seamless-scroll支持列表的自

女德班吊车尾·2024-09-04 16:18

Cannot read properties of undefined (reading ‘_android’)

记录：问题Cannotreadpropertiesofundefined(reading‘_android’)vue3+ts使用qrcodejs2插件生成二维码报错Cannotreadpropertiesofundefined

久违的小技巧·2024-09-04 03:23

vue3+ts 中使用mitt进行跨组件通信

mitt插件的使用安装插件进行封装一个模块，对外暴露一个Mitt实例使用安装插件官方文档pnpmimitt--s//我用的pnpm或npmi--smitt或yarnaddmitt进行封装一个模块，对外暴露一个Mitt实例1、在utils文件夹下新建mitt（例如mitt.ts），用于初始化并导出mitt实例：//src/eventBus.tsimportmittfrom'mitt';//定义事件类

我胡为喜呀·2024-09-01 11:44

vue3+ts报错：找不到模块“./App.vue”或其相应的类型声明

原因是typescript只能理解.ts文件，不能理解.vue文件第一步在src下新建文件env.d.tsdeclaremodule'*.vue'{importtype{DefineComponent}from'vue'//eslint-disable-next-line@typescript-eslint/no-explicit-any,@typescript-eslint/ban-typesc

前端小顾·2024-08-31 06:05

vue3+ts项目新建后找不到模块vue或类型{}上不存在属性

新建的项目，不影响功能，但是红色的波浪线很不好看。在tsconfig.json文件中增加一行代码：让ts识别vue文件"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],

夏与冰·2024-08-31 06:34

vue3+ts 引入 json-editor-vue3 报错

报错内容SyntaxError:Therequestedmodule'/node_modules/jsoneditor/dist/jsoneditor.min.js?v=00499bcc'doesnotprovideanexportnamed'default'(atjson-editor.vue:2:8)尝试解决、1.import'jsoneditor'importJsonEditorVuefro

Red_Xx·2024-08-30 10:24

Vue3+TS Element Plus 中Table同时只能展开一行且能关闭

el-table有展开行功能，但是展开多行并不好看，所以需要设置expand只展开一行，用expand-change可以实现。@expand-change=""//展开或是关闭时执行的函数:expand-row-keys=""//设置当前展开行，要求值为数组(白话就是存放在这个数组的ID会在页面中展开,没有就不会展开):row-key=""//设置行的唯一标识，用于配合expand-row-key

lemontree-xy·2024-08-28 16:40

Java实现文本查重（相似度）无三方工具版本

功能背景：在业务记录逐渐增长的前提下，逐渐出现重复项目名称数据和重复内容数据，这些数据导致项目记录质量的下降。

尽兴-·2024-08-22 10:29

vue3+ts实现图片预览功能

首先，需要创建一个Vue组件，用于显示图片和预览图。import{ref}from'vue';exportdefault{props:{imageSrc:{type:String,required:true,},previewSrc:{type:String,required:true,},},setup(props){constpreviewVisible=ref(false);constsho

前端fighter·2024-03-02 07:49

vite+ts+vue3项目初始化 -- eslint+prettier代码格式化

vue3+ts项目初始化配置--eslint+prettier格式化校验一、配置@代替src目录二、项目中引入scss三、引入公共样式四、引入组件报红色波浪线五、有些语法不认识需要在vscode中安装Volar

weixin_43993776·2024-02-20 17:55

vue3+ts项目搭建

⛰️个人主页:蒾酒系列专栏：《vue3实战》山高路远，行路漫漫，终有归途。目录前置条件基础工程模板搭建测试环境变量是否配置成功初始化vue项目安装常用依赖基础项目目录介绍前置条件请确保已经装好node，并配置好环境变量下载地址：Node.js—Download(nodejs.org)https://nodejs.org/en/download基础工程模板搭建测试环境变量是否配置成功查看版本命令打印

蒾酒·2024-02-20 12:18

一、vue3+ts项目框架搭建——规范

新建项目及规范配置1.1项目初始化1.1.1环境准备1.1.2初始化项目1.2项目配置一、eslint配置1.1vue3环境代码校验插件1.2.eslintrc.cjs配置文件1.3运行脚本二、配置prettier:格式化工具2.1安装依赖包2.2.prettierrc.json添加规则2.3.prettierignore忽略文件三、配置stylelint:格式化css代码3.1.stylelin

小曲曲·2024-02-20 00:34

vue3+ts 引入高德地图并使用地图选点和搜索

引入高德地图npmi@amap/amap-jsapi-loader--save在index.html引入window._AMapSecurityConfig={securityJsCode:'',//你的密钥}创建map.vue组件确定{{item.name}}地址：{{item.address}}import{shallowRef,defineEmits,defineComponent,ref,

久爱@勿忘·2024-02-08 18:21

umi+dva 什么都有的项目记录（umi+dva练习笔记）

学习：umi/dva/antdpro为主，还有saga/redux等等刚进公司，啥也不懂，光速拔苗助长sorrycc（做umi和dva的人）的博客https://github.com/sorrycc/blog/issues1、saga：effect/yieldcallpull非常详细https://redux-saga.js.org/docs/basics/DeclarativeEffects.h

sasaraku.·2024-02-08 07:55

幸福在哪里

比如我希望每天能把项目记录下来，知道每天家里花费多少？收入多少？每天的负债是在减少还是增加，能有点个人的生活。孩子不在每天不停的打游戏，多少天都足不出户

赤脚哥·2024-02-06 16:09

找不到模块“vue-router”或其相应的类型声明。ts(2307)

场景：新建了一个项目：vue3+ts。

有蝉·2024-02-05 04:36

vba编写的出库单（可添加出库项目记录、生成、打印出库单）

一、操作界面二、使用说明使用说明：1、出库单号由8位出库日期和3位序列号组成，如20220606001；2、出库单号只需填写序列号（1~999）；3、当出库日期更新或出库单号不符合规则时，出库单号显示为系统默认可用序列号；4、点击"添加"，将出库信息添加到出库清单5、点击"生成"，生成出库单6、选中出库清单中的记录，点击右键，可以删除该记录7、双击出库清单，可以清空出库单中记录三、vba代码Pri

小崔2022·2024-02-04 14:37

Vue项目套壳安卓webview项目记录

1、安装AndroidStudio，不再赘述，可查阅博客2023最新版Androidstudio安装入门教程（非常详细）从零基础入门到精通，看完这一篇就够了。-CSDN博客2、新建Android项目打开主界面activity_main.xml，在里面放一个WebView：代码如下：打开MainActivity.java文件，让WebView全屏显示，并设置常见网络地址测试网络：代码如下：impo

jimson_zhu·2024-02-03 12:10

VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

1.官方网站：OpenSeadragon2.使用npm下载插件：npminstallopenseadragon3.在index.html文件引入资源4.组件使用（一张图片显示效果）1.引入OpenSeadragonimportOpenSeadragonfrom"openseadragon"2.存放图片的标签3.初始化实例constviewer=OpenSeadragon({id:"opensead

小猫瘦瘦·2024-02-03 04:51

数据大屏项目Vue3+TypeScript+tailwindcss+Vite+DataV+Echart+pinia

疫情数据大屏（ts+vue3）本着学习vue3+ts技术栈的目前，敲了这个项目。

蹦哒·2024-02-02 20:41

vue3+ts使用echarts正确姿势

首先我们去封装一个Hooks为啥要封装Hooks在vue2中我们可以全局导入echarts通过this.ecahrts方式去使用echats,在vue3中使用了组合式Api对于this的支持不是方便所以为了便于开发建议自己去封装hooks来代替this.ecahrts方式去使用echats,在vue3中使用了组合式Api对于this的支持不是方便所以为了便于开发建议自己去封装hooks来代替thi

我叫汪枫·2024-02-01 19:35

【Strelitzia项目】vue3+ts实现element-plus中选择器省市区三级联动

但是在这个问题的过程中存在着不少疑惑，首先就是百度找不到vue3+ts的代码，而自己本身又是后端开发人员，所以在技术层面存在着不少的疑问，vue2编写代码的方式不太熟练。

兜里旺仔没加糖·2024-02-01 02:00

import { ArrowRight } from “@element-plus/icons-vue“；

今天下午快被这个问题折磨疯了虽然知道这个问题怎么产生的但项目里那个碍眼的红线就是去不掉后来才发现这是插件的锅我的心情你知道我想要说什么的想必能看到这篇文章的也知道这个问题是怎么产生的vue3+ts使用的时候默认是需要带上文件名的但是引入

RyzenVega·2024-02-01 00:31

MySQL条件判断时间段不能出现重叠/重复

项目记录（判断时间段不能出现重叠的条件）：//判断时间段是否有重叠$map=['start_time|end_time'=>['between',[strtotime($_POST['start_time

每天都进步一点点·2024-01-31 20:16

【Vue3+Ts】简单路由配置页面缓存keepAlive可选控制

router.ts路由文件配置constroutes=[{path:"/",name:"home",meta:{title:"首页",keepAlive:true,//主要代码},component:()=>import("@/view/Home/index.vue"),}]App.vue配置import{computed}from"vue";import{useRoute}from"vue-ro

极致♀雨·2024-01-31 18:35

【vue3+ts】组件定义props并设置初始值

interfaceProps{filterPopVisible:boolean;reqType:string;max:string;error:boolean;isMultiple?:boolean;defaultKeys?:any[];nodeKey?:string;}constprops=withDefaults(defineProps(),{isMultiple:true,nodeKey:"

String佳佳·2024-01-31 12:40

使用vue3+TS实现动态路由【2023无套路不需要VIP】

之前把注入路由写在beforeEach里面，在搭建动态路由前出现了很多问题，尝试各种方法都不行，心都累了。网上基本上都是这样方式，不能这样搞，反正我的项目是实现不了的。不知道出现多少错误，比如，无法找到文件、import引入错误。Uncaught(inpromise)Error:Cannotfindmodule'./()=>webpack_require("./src/viewslazyrecur

猫在裙角jslms·2024-01-30 12:09

VUE 3+TS “类型“DefineComponent＜{}, {}, any＞”的参数不能赋给类型“Plugin_2”的参数

vue3+ts，编辑器提示报错:参数不能赋给类型。要开启什么ts配置才能去除？

宇文合·2024-01-27 14:16

vue3+ts读取excel文件数据

先下载xlsx依赖npmixlsx--save在所需页面引入xlsx依赖import*asxlsxfrom"xlsx";必须这样写写别的引入会报错！！先把文件读取为二进制文件/***把文件按照二进制进行读取*@paramfile*@returns*/constreadFile=(file:File)=>{returnnewPromise(resolve=>{letreader=newFileRea

yasuo56·2024-01-26 17:05

记事本(父页面与iframe子页面的联通,vue3+ts展示fbx模型,与tga贴图)

vue3+ts展示fbx与tga贴图npmithree--saveimport{ref,onMounted}from'vue';import*asTHREEfrom'three';import{FBXLoader

yasuo56·2024-01-26 17:02

vue3+ts 实现时间间隔选择器

需求背景解决效果视频效果balancedTimeElement.vue需求背景实现一个分片的时间间隔选择器，需要把显示时间段显示成图表，涉及一下集中数据转换[“02:30-05:30”,“07:30-10:30”,“14:30-17:30”]‘[(2,5),(7,10),(14,17)]’[4,5,6,7,8,9,10,14,15,16,17,18,19,20,28,29,30,31,32,33,

柳晓黑胡椒·2024-01-26 16:22

前端Vue3+TS实现视频放大缩小，放大后实现视频的拖动+拖动边框限制

最近实现了一个新的需求，大体内容是要对所播放的视频做一个放大缩小的处理，同时在视频放大的同时要实现视频的一个拖拽，拖拽的同时，要对视频拖动的范围作出一个限制，下面来看看我的一个实现的思路。技术栈：Vue3.2+TS1.放大缩小采用的形式是什么？/1.肯定不能单纯的采用px放大，这样会出现视频放大的时候位置发生变动/2.采用scale放大，这样每次放大都是视频的中心点2.拖动实现/1.当鼠标按下和视

道长道长IOT·2024-01-25 07:57

Vue3+Ts实现路由守卫

路由守卫前言路由守卫是啥实现方式第一种：全局守卫第二种:局部守卫前言博主本期主要讲解的是Vue3如何实现特定路由的路由守卫。那么好，本期正式开始。路由守卫是啥路由守卫其实是前端为了防止用户通过路由访问到它不能被访问的页面，这一点可以在后端实现，也可以通过前端实现，那么前端实现的方式之一就是路由守卫。场景一：当用户没有登录，但是通过路由想调用首页。路由守卫就可以在next进入路由前，进行校验操作。场

爱吃巧克li·2024-01-24 21:28

Vue3常用方法和组件

目录VUE3+TS【方法】文件下载【组件】二次封装`ElMessageBox`【方法】格式化时间【组件】导入单个文件，再次导入可替换，可回显【组件】同上单个上传组件【组件】封装展示表格和可修改表格【方法

小阮的学习笔记·2024-01-24 18:56

Vue3+Ts：使用i18n实现国际化与全局动态下拉框框切换语言

Vue3+Ts：使用i18n实现国际化与全局动态下拉框框切换语言一、下载依赖：二、创建ts文件并配置main.ts三，如何使用1.在中使用2.在setup中使用四、全局下拉框动态切换一、下载依赖：npminstallvue-i18n

靠着蓝色背景幻想·2024-01-23 12:38

Vue3+Ts：实现paypal按钮

Vue3+Ts：实现paypal按钮一、前端页面按钮实现第一步：下载paypal.js依赖第二步：引入要使用的vue页面，并调用。

靠着蓝色背景幻想·2024-01-23 12:34

【Vue3+Ts项目】硅谷甄选 — 菜单权限+按钮权限

一、菜单权限1.1路由拆分将项目路由拆分为：静态路由：login、404、home、screen异步路由：权限管理（包含三个子路由）、商品管理（包含四个子路由）任意路由：任意路由src/router/routes.ts//对外暴露配置路由（常量路由）：全部用户都可以访问到的路由exportconstconstantRoute=[{//登录path:'/login',component:()=>im

唧唧bong_·2024-01-23 04:44

vue3+ts项目引入雪花id报错

在更新公司项目的时候发现如下报错：在经过询问之后，了解到要解决这个报错需要如下步骤：（1）在终端控制台中输入：pnpmh(或者是yarn)installsimple-flakeid然后等待其下载安装（2）若还是报错，需要在下面做更改全部更改完之后便可解决该报错

沉醉何欢凉·2024-01-21 19:52

学习vue3（一）

参考：Vue3+TS快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github

小超^_^·2024-01-20 21:06

vue项目记录移动端页面浏览位置

描述:假设b、c两个页面需求:b到c页面的时候需要记录当前b的浏览位置，c返回到b的时候滚动到上次浏览的位置实现方法:将滚动距离存在vuex、beforeRouteLeave1.首先在vuex中state定义一个变量来记录当前的浏览的位置//state中定义数据state:{carrerTouScroll:{height:''//滚动的距离}}//mutations操作state数据mutatio

Kiana娜娜·2024-01-20 10:05

vue3+ts +pinia 自己记录的写的乱

1，父传子constprops=defineProps({type:{default:'edit',type:String,},});标签vue3（中没有this）父子组件传参单个父子传参子组件多个父子传参用v-model可以直接更改子组件的数据useAttrs可以获取父组件传参的所有内容事件也能接收到使用或者不用：type直接用：useAttrs和defineprops不能用时使用props的优

又是取名的一天·2024-01-19 15:47

vue3+ts axios封装及使用

http.ts文件importaxios,{Axios,AxiosResponse,AxiosRequestConfig}from"axios";//处理类型“AxiosResponse”上不存在属性“errorinfo”。ts(2339)关键一步。declaremodule"axios"{interfaceAxiosResponse{//参数与res的字段相对应result:T;statusco

wz990223·2024-01-16 17:42

vue3+ts 类型“never”上不存在属性“xxx”

vue3+ts语法报错：类型“never”上不存在属性“name”先来看下错误代码修改：consttemplateLists=ref([]asany[]);

饱饱~~·2024-01-15 19:26

[Vue3] v-for循环中报错类型“never”上不存在属性“xxx”

Vue3+ts项目中，template报错：类型“never”上不存在属性“xxx”错误复现：conststate=reactive({xList:[],});return{...toRefs(state

青颜的天空·2024-01-15 19:53

vue3+ts 中实现压缩图片、blob 转 base64

压缩图片1.npm安装image-compressor.js2.引入importImageCompressorfrom'image-compressor.js'3.使用constcompressImage=async(file:any)=>{varimageCompressor=newImageCompressor()returnnewPromise((resolve,reject)=>{imag

微光无限·2024-01-15 00:34

vue3+TS使用component 组件的实例

目录一.项目中实际使用1.代码使用二.元素1.使用方式：2.代码解释一.项目中实际使用1.代码使用之前，我们使用过，在login相关的几个页面使用component实现登录/注册/找回密码等页面的动态切换，在天转到这个页面时，传递一个参数，根据参数去显示不同的页面，（当然，你也可以选择将这些页面都加入到路由里，然后设置不同的跳转路径也是可以的）importImageShowfrom"./compo

程序猿online·2024-01-13 09:42

Vue3+TS后台管理系统项目完结撒花(已部署)

Vue3+TS后台管理系统项目完结撒花1.线上体验Vue3+TS后台管理系统在线体验客官如果觉得还不戳，github上不妨顺手点个⭐️，鼓励一下吧。

独鹿DT·2024-01-12 20:01

【Vue3+Ts项目】硅谷甄选 — 用户管理+角色管理+菜单管理+首页

一、用户管理1.1接口1.1.1接口定义src/api/acl/user/index.ts//用户管理模块的接口importrequestfrom'@/utils/request'importtype{AllRoleResponseData,SetRoleData,User,UserResponseData}from'./type'enumAPI{//获取全部已有用户账号信息ALLUSER_URL

唧唧bong_·2024-01-12 20:29

推荐频道