vue3随手记第13页

Vue-56、Vue技术路由的使用

2、前端路由：key是路径，value是组件1、基本使用vue-router3只能在vue3中使用vue-router3才能在vue2中使用1、vue2安装npmivue-router@3或者cnpmivue-router

一叶飘零晋·2024-02-10 10:34

uniapp 全局引入vant 组件库

vant4官方文档vant2官方文档vant3官方文档一、创建uniapp项目+vue3二、通过npm安装vantvue3项目，安装最新版Vantnpmivantvue2项目，安卓vant2npmivant

冷七七-·2024-02-10 10:52

vue3踩坑之作用域插槽的使用，以及vue3和vue2中作用域插槽的对比和使用

项目场景：在系统后台开发中，前端需要对后端返回数据进行处理，比如说，用户角色、付款方式等等，而返回的这些数据里面通常是数字来表示相关的角色和身份，如：1表示管理员，2表示用户；又比如说1表示支付宝支付，2表示微信支付，3表示银行卡支付。页面上渲染出数据是数字的形式，但对用户来说其实这种方式并不具备明显的指代意义，所以为了实现更好的用户体验，前端会使用作用域插槽对该数据进行处理，实现与用户之间更好的

我也想做全栈一霸！·2024-02-10 10:20

Vue如何实现不同登录方式的切换（账号密码登录、邮箱验证登录等）

文章目录前言一、使用vue开发框架的时候，无论是vue2或是vue3，都会运用到elementui组件库或是element-plusui组件库，所以我们要解决的问题首先从这些组件库里来找寻答案二、项目里按需引入或者全局导入

我也想做全栈一霸！·2024-02-10 10:49

如何使用Element Plus 提供的Icon图标库

文章目录前言一、安装二、使用1.引入需要的图标2.页面效果3.还有一个奇怪的问题总结前言用vue3开发的时候，使用element-plusUI组件库的时候，发现不能像之前vue2时候使用的那么方便了，需要单独引入和使用

我也想做全栈一霸！·2024-02-10 10:49

vue3集成bpmn

文章目录前言一、依赖二、汉化配置1.引入文件2.样式文件总结前言vue3集成bpmn配置工作流一、依赖"bpmn-js":"^7.3.1","bpmn-js-properties-panel":"^0.37.2

快乐的木子李·2024-02-10 08:51

铱塔 (iita) 开源 IoT 物联网开发平台，基于 SpringBoot + TDEngine +Vue3

01铱塔(iita)物联网平台铱塔智联(open-iita)基于Java语言的开源物联网基础开发平台，提供了物联网及相关业务开发的常见基础功能,能帮助你快速搭建自己的物联网相关业务平台。铱塔智联平台包含了品类、物模型、消息转换、通讯组件（mqtt/EMQX通讯组件、小度音箱接入组件、onenetStudio接入组件）、modbus透传接入、云端低代码设备开发、设备管理、设备分组、规则引擎、第三方平

AIoT科技物语·2024-02-10 07:33

Vue3使用vant检索组件van-search的坑

当清空按钮与检索按钮同时居右时，点击clear清空按钮事件时会同时触发click-right-icon事件,如下配置：onClickSearch(true)"@click-right-icon="onClickSearch()">建议检索按钮放到左侧，防止与清空按钮出现同一侧。且清空按钮点击无效，层叠样式排版有问题，需重新使用样式更改位置偏移.van-field__body{.van-field_

杀猪刀-墨林·2024-02-10 06:18

vue3-内置组件-Teleport

Teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的DOM结构外层的位置去。基本用法有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在DOM中应该被渲染在整个Vue应用外部的其他地方。这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有

王大可996·2024-02-10 06:59

router路由跳转的两种模板2.0版本

router.push('/home');};由于上一个版本，没有导入全局组件的小伙伴，可能用不了第二套模板（上面那套代码）直接调用router库中的push方法，这边提供一套全新的版本用不来的原因是没添加进全局组件（vue3

用键盘当武器的秋刀鱼·2024-02-10 02:44

极其抽象的路由

$router.push('/home');};时代变了，在查询了各种资料后，这玩意是vue2的产物，让我们拥抱，vue3吧。。。

用键盘当武器的秋刀鱼·2024-02-10 02:44

学习Vue3的第一天

创建Vue3工程前提条件基于vue-cli创建（不推荐）基于vite创建（推荐）通过CDN使用Vue代码示例简介什么是Vue？

世俗ˊ·2024-02-10 01:04

保姆级教程从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp

本教程后面部分（用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp）适合习惯使用vscode或Webstorm等（或者说不习惯HBuilderX）的人参考，如果习惯使用HBuilderX

tepkco·2024-02-10 00:16

vue3的vite配置

使用Vite快速构建Vue3+ts+pinia脚手架使用Vite快速构建Vue3+ts+pinia脚手架-51CTO.COM1、现把下面导入的4个npm插件运行完成npmadd-Dtersernpmivite-plugin-imagemin-Dnpmivite-plugin-compression-Dnpmipostcss-preset-env-D2

A-超·2024-02-10 00:16

解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白

报错内容Failedtoloadmodulescript:ExpectedaJavaScriptmodulescriptbuttheserverrespondedwithaMIMEtypeof"text/html".StrictMIMEtypecheckingisenforcedformodulescriptsperHTMLspec.解决方法router文件//创建路由exportconstrou

写BUG的一枚好手·2024-02-10 00:14

vue3+vite在vite中配置跨域

在vite.config.js中配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path';//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],base:"./",//打包路径resolve:{al

bsefef·2024-02-10 00:43

vue3引入vant总结

Vue3局部引入vant亲测有效[email protected]中配置{"plugins":[["import",{"libraryName

牛牛爱科技·2024-02-09 21:41

Vue3学习与实践

文章目录学习资料Vue的特点组件化模式声明式编码使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点初始Vue3Vue3带来了什么性能的提升源码的升级拥抱TypeScript新的特性Vue-cli脚手架使用

技术人生-小草·2024-02-09 20:35

todolist的五种写法（原生、vue2、vue3、react类组件，react函数组件）

1.js、vue2、vue3、react类组件、react函数组件的特性1.1JavaScript（JS）特性弱类型：JavaScript是一种弱类型语言，变量的类型可以在运行时动态改变。

前端fighter·2024-02-09 18:54

百度地图Api的引入使用-vue3组件

一、引入因为用的场景较多，抽离为组件，首先添加js文件exportfunctionbaiduMap(){returnnewPromise(function(resolve,reject){window.baiduMap=function(){resolve();};letscript=document.createElement("script");script.type="text/javasc

小佳的笔记·2024-02-09 16:11

养成记录的习惯

记录工具A．xmind思维导图（构建思维，清理思路）B．日事清（分轻重缓急的安排每天的工作）C．有道云笔记（随手记录所有书评，链接等）D．wps（文档表格简历......越来越方便了......）E．扫描全能王

郭强GQ·2024-02-09 12:40

vue3中如何通过emit自定义事件

在组件内自定义事件：提交import{defineComponent}from'vue'exportdefaultdefineComponent({emits:['form-submit'],//先申明setup(props,context){constsubmitForm=()=>{context.emit('form-submit',true)//后定义事件以及传值}return{submit

得知此事须躬行·2024-02-09 11:51

vue3中通过对象来改变样式颜色

直接上案例代码，学过vue3的一看就懂：颜色变化//eslint-disableimport{defineComponent,reactive,toRefs,onMounted}from"vue";exportdefaultdefineComponent

得知此事须躬行·2024-02-09 11:51

vue3 + element-plus 的 upload + axios + django 文件上传并保存

座右铭：怎么简单怎么来，以实现功能为主。欢迎大家关注公众号与我交流之前在网上搜了好多教程，一直没有找到合适自己的，要么只有前端部分没有后端，要么就是写的不是很明白。所以还得靠自己摸索出来后，来此记录一下整个过程。其实就是不要用默认的action，要手动实现上传方式http-request，然后再传给后端进行各种操作了这里隐藏了文件展示列表展示了上传文件的个数文件去重上传也对上传文件的格式做了限制在

卫龙~·2024-02-09 11:53

github 搭建个人导航网

欢迎大家关注公众号与我交流最近搭建了个个人的导航网，具体内容见下图，欢迎大家访问吖，点我访问(首次访问较慢)具体实现是使用vue3编写，白嫖github的page部署首先在github上创建一个仓库：name.github.io

卫龙~·2024-02-09 11:22

vue3+vite+ts 配置commit强制码提交规范配置 commitlint

配置git提交时的commit信息，统一提交git提交规范安装命令:npminstall-gcommitizennpmicz-customizablenpmi@commitlint/config-conventional@commitlint/cli-D文件配置根路径创建文件commitlint.config.jsmodule.exports={//继承的规则extends:['@commitli

周家大小姐.·2024-02-09 08:29

Vue3 常用的10个组合式 API

而通过Vue3，组合式API增强了我们利用Vue的能力，使我们的代码更具模块性和可读性。

子伟-H5·2024-02-09 08:06

Vue3——setup 语法检测

1.安装VueLanguageFeatures、TypeScriptVuePlugin插件2.安装后，禁用Vetur3.禁用后重启工具即可

一只漫步前行的羊·2024-02-09 07:46

vue3学习——axios封装

安装pnpmiaxios/src/utils/request.tsimportaxiosfrom'axios'import{ElMessage}from'element-plus'constrequest=axios.create({baseURL:import.meta.env.VITE_APP_BASE_API,timeout:5000,})//请求拦截器request.interceptor

可乐KL·2024-02-09 07:45

vue3学习——路由

安装pnpmivue-router/src/router/index.tsimport{createRouter,createWebHashHistory}from'vue-router'import{constantRoute}from'@/router/routes.ts'letrouter=createRouter({history:createWebHashHistory(),routes

可乐KL·2024-02-09 07:45

vue3——实现表单校验

带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~一、表单校验的意义当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作可以让用户的信息都按一定的规则来设置，方便统一管理通过表单校验可以有效地规避不法分子进行

leo·2024-02-09 07:45

vue3——登录校验

页面首先需要在表单配置model、ref、rules，el-form-item中放prop登录scriptletform=reactive({username:'admin',password:'111111',})constformRef=ref()constbtnLoading=ref(false)construles={username:[{required:true,message:'请输

可乐KL·2024-02-09 07:13

【vue3学习笔记】自定义hook；toRef与toRefs

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通课程P156节《自定义hook》笔记：实现一个鼠标“打点”功能：注意点：（1）组件卸载时需要接触window上的事件绑定，否则组件卸载后window

youyoufenglai·2024-02-09 07:04

【vue3学习笔记】shallowReactive与shallowRef；readOnly与shallowReadOnly；toRaw与markRaw

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通课程P158节《shallowReactive与shallowRef》笔记：reactive()与shallowReactive()：reactive

youyoufenglai·2024-02-09 07:56

【随手记】python中的nonlocal关键字

看一段代码，下边这段代码用于将二叉搜索树转换为升序排列的双向链表："""#DefinitionforaNode.classNode:def__init__(self,val,left=None,right=None):self.val=valself.left=leftself.right=right"""classSolution:deftreeToDoublyList(self,root:'N

zcongfly·2024-02-09 06:09

Vue3编写简单的App组件(二)

一、Vue3页面渲染基本流程1、入口文件ViteApp2、main.ts//引入CreateApp用于创建应用import{createApp}from"vue";//引入App根组件importAppfrom

maplea2012·2024-02-09 06:04

第二章 Electron自定义界面(最大化、最小化、关闭、图标等等)

这里我已经搭建好了项目快速搭建Electron+Vite3+Vue3+TypeScript5

Etc.End·2024-02-09 06:26

随手记D92——关于冥想

冥想的三个阶段：阶段一：集中注意力，让思想平静阶段二：发现思想不会轻易平静，需要耐心等待阶段三：当平静到来，直觉就会变得灵敏，看到更加广阔的世界专注当下的益处远离浮躁，进入平静的内心状态激活直觉，获得更加灵敏的感知洞察细节，通过信息差决定成败心怀感恩人的需求和欲望是持续膨胀的，因此我们习惯于向外界索取财富，索取知识，索取感官刺激和物质享受。每当我们达成一个目标，就会收获成就感、感到幸福和喜悦。但这

文言娟语·2024-02-09 06:40

从 16 个方向逐步搭建基于 vue3 的前端架构

前言由于vue3.2版本的发布，的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新请自行了解。到目前为止，我认为vue3已经完全可以用于生产环境。

codexu_461229187·2024-02-09 06:46

基于Vue的前端架构，我做了这15点

前言由于vue3.2版本的发布，的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新请自行了解。到目前为止，我认为vue3已经完全可以用于生产环境。

codexu_461229187·2024-02-09 06:45

2024年的VUE2下的无效指令npm install --save vue-i18n

vue官网已经声明了不再维护vue2,vue-i18n安装依赖的时候就只接安装vue3的vue-i18,直接报错：>npminstall--savevue-i18nnpmERR!

阿狸Jay(塘主)·2024-02-09 06:43

【高频前端面试题--TypeScript篇】

作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言高频前端面试题--Vue3.0篇什么是TypeScript？

码上有前·2024-02-09 05:25

【高频前端面试题--Vue3.0篇】

作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言高频前端面试题--Vue3.0篇Vue3.0有什么更新defineProperty和proxy的区别Vue3.0为什么要用proxy

码上有前·2024-02-09 05:21

Vue3中路由配置Catch all routes (“*“) must .....问题

Vue3中路由配置Catchallroutes(“*”)must…问题文章目录Vue3中路由配置Catchallroutes("*")must.....问题1.业务场景描述1.加载并添加异步路由场景2.

小袁搬码·2024-02-09 05:50

Vue3基础(十yi)_常用生命周期函数_setup_onMounted_onUpdated

对比vue2beforeCreate->使用setup()created->使用setup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmountederrorCaptur

六卿·2024-02-09 05:32

vue3+elementplus el-upload组件上传第三方oss存储问题

文件上传功能属于一项基本功能，而随着对象存储的发展，现在项目开发中，大部分都是把文件上传到第三方的oss系统或者自己搭建的oss系统。而el-upload组件是elementui提供的一个文件上传的组件，其有很多属性和事件，如下图所示是其组件的部分属性，因为其属性和事件比较多，所以el-upload组件也是一个比较有难度的组件。element-plusel-upload组件文档地址那么使用el-u

qq_33453797·2024-02-09 05:59

3分钟带你了解Vue3的nextTick()

概念在Vue3中nextTick()方法的行为和Vue2中基本相似，但它进行了一些优化，以提高性能和稳定性。nextTick

_Minato_·2024-02-09 04:22

懒惰怎么治

参加了随手记的早起打卡，10元/3天，愿坚持，对治掉坏情绪。心情不好时吃啥也不开心，干啥也提不起劲，看不惯身边人，让自己

ba832e717b37·2024-02-09 04:30

vue3跨组件(多组件)通信：事件总线【Event Bus】

oumae-kumiko·2024-02-09 01:13

VUE2模拟VUE3中的Teleport实现改变元素挂载的节点

Teleport页面exportdefault{name:'teleport',props:{to:{type:String,required:true}},mounted(){consttoEl=document.querySelector(this.to)if(toEl){toEl.appendChild(this.$el)}},destroyed(){consttoEl=document.q

灰海·2024-02-09 00:34

推荐频道

vue3随手记