vue3

vite vue3下配置history模式路由的步骤记录

目录 dev 模式 pro模式 nginx 配置 后端配置 补充几个文件 总结 dev 模式 利用vite 配置代理,可以解决前端浏览器限制跨域问题(当然后端要自己配置好) export default defineConfig({ // 配置在打包时,保障所有css\js能被 »

vue3+vite+ts使用monaco-editor编辑器的简单步骤

目录 前言 实现 打包报错的处理 总结  前言 近期要完成一个代码编辑器的内容,用的vue3.0+ts+vite架构,学习尚浅, 常在插件上遇坑 特此记录下在monaco-editor的使用 需求:yaml和sql的文件的高亮、补全 实现 1.安装 // ^0.34.1 »

SpringBoot+Vue3实现上传文件功能

目录 前言 一、后端 二、前端 三、演示 前言 开发后台系统时经常遇到实现上传文件的功能,在这记录一下我的方法 后端:SpringBoot2前端:Vue3+ElementPlus工具:IDEA 一、后端 /** * 上传采购合同PDF * * @ »

SpringBoot+Vue3实现上传文件功能

目录 前言 一、后端 二、前端 三、演示 前言 开发后台系统时经常遇到实现上传文件的功能,在这记录一下我的方法 后端:SpringBoot2前端:Vue3+ElementPlus工具:IDEA 一、后端 /** * 上传采购合同PDF * * @ »

Vue3 封装扩展并简化Vuex在组件中的调用问题

目录 1.创建文件utils/vueTool.js 2.添加开发环境中的模块验证 3.页面调用封装 如果你在项目中使用了 vuex模块化,并且在项目中使用actions中函数调用频率高,推荐了解一下这种方式。 比如下面两种方式调用 , 第一个是直接传参设置, 第二个是添加了异步ajax返 »

Vue3异步组件Suspense的使用方法详解

Suspense组件 官网中有提到他是属于实验性功能:<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。<Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层 »

Vue3父子通讯方式及Vue3插槽的使用方法详解

在Vue3中父子通讯方式 Vue3父传子(props) 父组件如下: <template> <div class="about"> <h1>This is an about page</h1> <children »

基于vue3实现一个抽奖小项目

目录 前言 数据保存 姓名切换 奖项切换 历史记录 数据导入 结语 前言 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下。 浏览链接:http://xisite.top/original/luck-draw/index.html 项目链接:https://gite »

Vue3之Vite中由element ui更新导致的启动报错解决

目录 Vite中由element ui更新导致的启动报错 问题解决 总结 Vite中由element ui更新导致的启动报错 直接上图,报错如下: 导致的结果就是打开浏览器,啥也没有: 通过谷歌在github上看到了一个解决方法—— 问题解决 将node升级为16的版本 »

Vue3+Tsx给路由加切换动画时的踩坑及解决

目录 项目场景: 样式文件 步骤 最终代码 总结 项目场景: 用最新的技术栈Vue+Tsx给后台管理系统路由加动画时,语法上与模板语法有些许不同,记录下自己的踩坑记录 样式文件 新建文件transition.scss,这里用的是若依框架人家写好的样式,写好之后在全局引入该样式文件 »

Vue3 通过作用域插槽实现树形菜单/嵌套组件

目录 一、需求来源 二、效果图 三、使用示例(VTreeNodeDemo.vue) 四、源码(VTreeNode.vue): 一、需求来源 工作中需要一种树形菜单组件,经过两天的构思最终通过作用域插槽实现: 此组件将每个节点(插槽名为 node)暴露出来。 通过插槽的 attribu »

vue3源码分析reactivity实现原理

目录 引言 第一部分:简单版reactivity (1).实现reactive和effect (2).实现ref (3).实现computed 第二部分:深入分析对于object、array的响应式代理 (1).handlers中的getter (2).handlers中的setter (3 »

Vue3源码分析调度器与watch用法原理

目录 本文主要内容 调度器 1.添加任务(queueJobs) 2.二分法找到插入位置(findInsertionIndex) 3.将执行任务的函数推入微任务队列(queueFlush) 4.执行普通任务(flushJobs) 5.添加后置任务(queuePostFlushCb) 6.queue »

Vue3中正确使用ElementPlus的示例代码

目录 一、创建Vue3项目 二、进入项目,安装Element-Plus 三、配置Icon 四、测试运行 五、Git提交一下 一、创建Vue3项目 vue create vue_element 选择自定义项目创建: 选择这几项(空格选择) 后面的几项全部回车,这里就不做介绍 »

vue3中的对象时为proxy对象如何获取值(两种方式)

目录 第一种获取target值的方式: PS:vue3中获取proxy包裹的数据 前言 一、具体问题 二、解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对 »

vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法

目录 问题背景 问题解决 总结 问题背景 在做vue3+ElementPlus项目时,复制粘贴ElementPlus官网的代码到项目中,结果会报这样的错: ESLint Parsing error: Unexpected token 明明就是按照官网的代码原封不动的粘贴过来,为什么会报 »

vue3.0 vant popup渲染不出来问题及解决

目录 vue3.0 vant popup渲染不出来 vue3中组件无法渲染成功 总结 vue3.0 vant popup渲染不出来 遇到这个问下,先检查看看是不是看着vant的2.x版本进行开发。 vant2.x版本代码如下: <van-popup   v-model="sho »

vue3 element-plus二次封装组件系列之伸缩菜单制作

目录 1、效果  2、主要逻辑代码 1、效果 折叠效果--只剩图标 展开效果--有图标有文字  2、主要逻辑代码 home.vue--主页代码 <template> <div class="common-layout"> <e »

图文详解Vue3没有代码提示问题的解决办法

在上一篇笔记中提到了Vue3+vite+Ts写代码过程中,出现的代码自动补全失效功能,今天来谈谈如何解决这个问题。 首先,我们已经很明确的就是安装了volar插件之后,HTML标签片段补全已经失效,即在template中书写HTML标签时,不会再有代码补全,即输入“div”,就是“div”,而不再 »

安装nvm node版本管理器的操作方法(vue2.x迁移vue3.x)

目录 前言: Mac 安装nvm 解决方案: 前言: vue2.x项目迁移vue3.x,由于node使用版本不同,需要管理不同的node来满足项目需求 首先需要删除本地node/npm 打开你 Finder,按shift+command+G,打开前往文件夹的窗口,分别输入下列目录进去之 »