vue3随手记

补充 vue3用户管理权限（路由控制）

之前有人问我，如果是二级路由如何添加，这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了假设，后端返回给我们一个数据[“/defa”,"/defa/defa1"]这样的一个路由表，我们就需要通过这个路由表去筛选匹配我们的动态路由，然后在进行添加。假设我们的动态路由是[{path:"/defa",name:"defa",component:()=>import("@/views
香蕉麻花皮·2024-01-11 10:06

element input组件自动失去焦点问题解决

最近在Vue3+ElementPlus中，使用el-input组件时，如果设置了v-model，那么在每次改变内容后后，input会自动失去焦点，这样会导致用户无法输入多个字符。
天問_·2024-01-11 10:25

vue3中css使用js变量

使用v-bind.el-form-item--default.el-form-item__label{color:v-bind(backgroundColor);}
杜蜜月·2024-01-11 09:29

setup 语法糖

只有vue3.2以上版本可以使用优点：更少的样板内容，更简洁的代码能够使用纯Typescript声明props和抛出事件更好的运行时性能更好的IDE类型推断性能在sciprt标识上加上setup顶层绑定都可以使用不需要
土井塔克树1412·2024-01-11 08:42

Vue3中的`ref`和`reactive使用中遇到的一些坑

Vue3中的ref和reactive使用中遇到的一些坑以下是一些常见的问题和解决方法：同时使用ref和reactive：在Vue3中，ref和reactive是两种不同的数据响应方式。
你的眼睛會笑·2024-01-11 07:10

vue3+ts笔记

vue3中是通过createApp函数创建一个应用实例。选项API和组合API：vue3中开始弱化this;setup将数据和方法交出去，模板中才可以使用，setup的返回值也可以是一个渲染函数，se
初心w50t2·2024-01-11 07:03

【vue3.0】23.0 某东到家（ 廿三）——下单流程优化

弹窗优化目前进入订单页面后，是直接弹窗，但实际使用效果是点击“提交订单”后再弹窗。优化如下：src\views\orderConfirmation\Order.vue实付金额¥{{calculations.totalPrice}}提交订单确认离开收银台请尽快完成支付，否则将被取消取消订单确认支付import{ref}from'vue'import{useCommonCartEffect}f
bobokaka·2024-01-11 07:18

uniapp 扫码原生插件 - 组件版（毫秒级、连续扫码、多码）Ba-ScanView

component组件模式，可直接在uniapp界面直接引用，高宽可随意设置支持连续扫码，可设置时间间隔支持多码选择支持设置扫码格式支持打开、关闭闪光灯支持相册图片识别同时支持vue2和vue3支持关闭和打开扫描支持多码直接返回扫码原生插件
三杯五岳·2024-01-11 06:38

vue3+TS+pinia+cookies+axiox 实现简单登录的持久化

浏览器缓存相关设置2.pinia状态管理应用3.request请求/响应拦截4.路由守卫5.登录页代码6.header登录部分代码二.部分代码截取1.login登录页2.header部分完整项目请访问gitee:vue3
程序猿online·2024-01-11 05:06

vue3 +TS axiox接口模块添加，fast mock接口访问测试

目录一.接口地址二.apipost接口测试，能否接通三.安装axiox1.下载安装依赖2.新建src/utils/request.ts文件2.1解释：后续后端真实接口需要替换baseURL，目前没有使用配置文件，后续更换3.新建src/utils/storage.ts文件4.新建src/utils/formDataFormat.ts文件，5.修改vite.config.ts文件，添加代理转发5.1
程序猿online·2024-01-11 05:36

vue3 +TS 安装使用pinia状态管理

目录一.安装1.下载安装依赖2.创建src/stores/index.ts文件3.创建src/stores/states.ts文件4.创建src/stores/interface/index.ts文件5.修改main.ts6.目录结构如下7.测试使用8.去到首页点击按钮，打开控制台查看一.安装1.下载安装依赖npminstallpinia2.创建src/stores/index.ts文件impor
程序猿online·2024-01-11 05:34

2024年Vue 3学习笔记：Vu3基础的完整指南

文章目录开篇总结1.创建Vue3工程1.1【基于vue-cli创建】1.2【基于Vite创建】（Vue官方推荐）1.3【基于Vite官方create-vite创建】2.Vue3语法核心2.1【拉开序幕的
放荡不羁的小雨鸽·2024-01-11 05:33

细节！！！整理Vue项目中的那些环境变量

但是我这里想去给他专个明白，因为基于传统Vue2+Webpack的项目与Vue3+Vite**的项
放荡不羁的小雨鸽·2024-01-11 05:03

我与雪梅读写群——且行且珍惜！

10.27日在雪梅姐推介下进入随手记宝妈微信群帮助整理星球群第二周话题。11.13日雪梅姐一对一指导拆书稿，指出最大问题在于逻辑性不强。11.26日第一次做线上分享。
林江影月·2024-01-11 04:17

vue3 vue-route4跳转新页面无法获取params参数

问题：vue3vue-router4跳转新页面无法获取params参数//跳转代码router.push({name:'newPage',params:{id:1}})//接收代码constres=router.currentRoute.value.paramsconsole.log
sanqi2469·2024-01-11 03:51

让el-option和el-select宽度保持一致

下面是Vue3写法：
百思不得小李·2024-01-11 03:06

vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.

但是在vue3的项目中作者已经将图标渲染的操作放入onMounted中执行，可是还是报
Jiang_JY·2024-01-11 02:17

vue3中如何让页面不能被全选

只需要在最外层div中加入user-select:none;样式即可.container{width:100%;height:100vh;user-select:none;}
zhige@·2024-01-11 02:29

Vue中$route和$router

在Vue3中，可以使用useRoute和useRouter这两个函数代替$route和$router。因此$router是用来操作路由的，$route是用来获取路由信息的。
进击中的大学生·2024-01-11 01:13

vue3-elementplus 后台管理系统的Layout布局

1.采用elementplus中container布局容器2.router.js中进行配置路由import{createRouter,createWebHistory,}from"vue-router";importLayoutfrom'@/layout/index.vue'constroutes=[{path:'/',redirect:'/login'},{name:'login',path:'
前端阿槑·2024-01-11 01:29

vue3引入elementplus后使用布局容器不生效

问题说明vue集成了elementplusmain.jsimport{createApp}from'vue'import'./style.css'importAppfrom'./App.vue'importrouterfrom'./router'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'varapp=
qq_50487743·2024-01-11 01:59

Electron快速上手

Electron目录简介打包简单的html/css/javascript项目打包Vue2项目打包Vue3项目简介Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。
木芒果呀·2024-01-11 00:08

基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

Tansci-Boot基于SpringBoot2+magic-api+Vue3+ElementPlus+amis3.0快速开发管理系统Tansci-Boot是一个前后端分离后台管理系统，前端集成amis
tansci·2024-01-11 00:17

vue3 ts defineProps、defineEmits、defineExpose、defineOptions、defineSlots

文章目录前言一、defineProps二、defineEmits三、defineExpose四、defineOptions（Vue3.3新特性）五、defineSlots(Vue3.3新特性)前言本章我们来讲解
枫ゞ·2024-01-10 23:06

Leaflet入门，Leaflet加载Geojson格式数据并渲染全球各国行政区划边界

Leafletvue2如何使用：《Leaflet入门，如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图，以及初始化后拿到leaflet对象，方便调用leaflet的api》vue3
汤姆猫不是猫·2024-01-10 22:41

己亥日记 2019.2.8 周五 晴（杂感）

应昨日所言，早去龙潭湖公园，游一圈，些许感受，随手记之！不明方向，地理，看到出口，以为已经游遍，便想出去，幸遇一故乡商贩，一介休长辈，去时想回来找其购点东西，交流下闯荡经历。
易太玄经史研究社·2024-01-10 21:03

vue3基础类型和引用类型，和store的使用

案例一：如果我在store创建一个变量，是读取缓存key为name的数据，store.name默认值是张三#声明一个变量consttitle=ref(store.name)#然后修改title.value="李四"，#问：打印store.name，会显示李四吗？#再换一个写法consttitle=computed({get(){returnstore.name},set(v:string){sto
梦想与想象-广州大智汇·2024-01-10 21:40

vue3引用类型和基础类型深度克隆

深度克隆失效的一个例子import{cloneDeep}from"lodash";import{ref}from"vue";constnavArr=ref(["recommend","hot","new",])constlist1:any=ref([])constlist2:any=ref([])constlist3:any=ref([])for(letindex=0;index
梦想与想象-广州大智汇·2024-01-10 21:05

vue（vue3）实现监听切出当前窗口，切回当前窗口调用查询接口

vue3中的写法onMounted(()=>{visibilitychange();})/**浏览器窗口监听（当点击审核跳转其他系统后，数据被审批完了，再次从浏览器窗口切换，请求接口）*/constvisibilitychange
别忘了微信·2024-01-10 20:09

vue3-04

子组件例1定义子组件Child1{{name}}{{country}}//定义属性,编译宏defineProps().container{width:100%;display:flex;flex-wrap:wrap;justify-content:space-evenly;flex-direction:row-reverse;}.name{font-weight:bold;}.location{f
敲代码的翠花·2024-01-10 20:08

Vue实战——Element Plus入门案例

一、ElementPlus介绍官网：一个Vue3UI框架|ElementPlus(element-plus.org)1.快速入门执行命令（在当前工程的目录下）：npminstallelement-plus
熊猫发电机hhh·2024-01-10 20:05

黑马最新版Springboot3+Vue项目跟学笔记——Vue3的快速入门

import{createApp}from'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return{msg:'hellovue3
熊猫发电机hhh·2024-01-10 20:04

Vue3-watch的用法

watch简介作用:监视数据的变化(和Vue2中的watch作用一致)特点:Vue3中的watch只能监视以下四种数据1.ref定义的数据(又可以分基本和对象)2.reactive定义的数据3.函数返回一个值
大嘴史努比·2024-01-10 20:54

vue3中引入本地图片

本地图片一般存放在src/assets或者public目录下，public目录下的图片不会被webpack打包，src目录下面的图片会被webpack打包在vue组件中的script中使用require引入，require里面为图片路径，一般用相对路径，注意require不能接收变量作为地址require('@/assets/img.png')在vue组件中的视图中直接使用相对地址
橙絮_缘·2024-01-10 19:47

vue element plus 安装

由于Vue3不再支持IE11，ElementPlus也不再支持IE浏览器。Edge≥79Firefox≥78Chrome≥64Safari≥12版本#ElementPlus目前还处于快速开发迭代中。
破浪前进·2024-01-10 18:01

【vue2 vs vue3 插槽】

前言：插槽的使用其实是很简单，你只需要明白两点：插槽是使用在子组件中的。插槽是为了将父组件中的子组件模板数据正常显示vue2.0的插槽话不多说直接上案例：这里是父组件我是插槽插入的内容这里是子组件varvm=newVue({el:'#app',data:{},components:{child:{template:'#child'}}});上面的代码所展示的效果就是你会发现在这里是子组件会多一行我
梦禄·2024-01-10 18:24

Vue3-45-Pinia-定义全局状态的两种方式

Pinia的作用介绍Pinia是管理全局状态的工具。全局状态：我的理解，就是一个全局的变量，在项目内，所有的组件都可以使用它，对它进行读写操作。全局状态的三个核心概念state:最核心的，就是变量的定义；getters:类似于组件的【计算属性】，是对state的修饰函数；actions:类似于组件的【方法】，可以对state进行逻辑处理；简单理解：state是定义全局状态的地方；getters是读
NorthCastle·2024-01-10 18:46

vue3 provide/inject

爷级,css中使用background-color:v-bind(color);可绑定setup中的值APP.vue我是红色我是黄色我是绿色import{reactive,ref,provide}from'vue'importAvuefrom"./components/A.vue";constcolor=ref('red')provide('color',color).box{width:50px
榴莲患者·2024-01-10 17:10

vite创建项目，报错“Cannot find module ‘./App.vue‘ or its corresponding type declaration” 问题解决方法

安装vite框架（Vue3）后，项目“main.ts”文件中“importAppfrom‘./App.vue’”部分有红色报错提示，其他文件有些import引入文件也报错。
So.九天·2024-01-10 16:01

pnpm 安装报错Cannot find module ‘./App.vue‘ or its corresponding type declarations.

最近的项目准备尝试搭建monorepo管理手机后台和门户三端，更新了vue3+webpack5+ts工程的包版本，运行后把eslint和stylelint的配置改完，yarn安装运行没问题，换pnpm安装后运行
txxxfish·2024-01-10 16:30

VSCode Vite4+Vue3 Cannot find module ‘./App.vue‘ or its corresponding type declarations.ts

项目根目录：vite-env.d.ts加入declaremodule"*.vue"{import{DefineComponent}from"vue"constcomponent:DefineComponentexportdefaultcomponent}解决
beeniz·2024-01-10 16:28

Cannot find module “xxx“ or its corresponding type declarations.Vetur

最近再写vue3+ts项目时,在组件中通过@引入其他组件时vetur会报错,虽然不影响运行,但是红色波浪线看着很难受研究了很久,最终发现是vscode项目文件夹下存在多个项目冲突导致的解决方法:把其他项目从工作区移除重新启动或者单独打开项目文件夹到
Vsmiao·2024-01-10 16:27

vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）

昨日我尝试使用vue3setup+ts+vite进行vue3项目的实现，遇到此问题：Cannotfindmodule…oritscorrespondingtypedeclarations.
bsefef·2024-01-10 16:27

vue3 使用 element-china-area-data 实现地区选择器

1、引入依赖包npminstallelement-china-area-data2、页面引用我引用的是v6版本，组件有改动官网：element-china-area-data-npm下面用例：使用的是二级联动数据import{provinceAndCityData,codeToText}from'element-china-area-data'letoptions=ref(provinceAndC
编程（变成）小辣鸡·2024-01-10 16:49

19万-20万

对了，受某同志的启发，从本月起我也自己设计了一张表，把每天、每周、每月的工作、生活都随手记录下来，相当于记录下时间到哪里去了，期望
吴佟·2024-01-10 15:49

vue3 ts 引入echarts

1.在main.ts中引入import*asechartsfrom'echarts'constapp=createApp(App);app.config.globalProperties.$echarts=echarts2.vue界面代码echarts测试import{ref,onMounted,defineComponent}from"vue";import*asechartsfrom'echa
萌新一枚SSS·2024-01-10 15:57

前端使用网址收藏

1.github排名较前的Vue3UI框架github排名较前的Vue3UI框架-掘金(juejin.cn)2.探索前端可视化大屏：创造令人惊叹的数据可视化体验探索前端可视化大屏：创造令人惊叹的数据可视化体验
m0_62168050·2024-01-10 15:56

在vue3项目中引入element组件小记

注意事项1.element-ui使用的vue2,如果是vue3项目则需要引入element-plus2.安装完组件后，需在项目中引入，否则不会生效，例如容器布局组件等安装组件npmnpminstallelement-plus
白杨攻城狮·2024-01-10 15:26

Vue3中组件的挂载及调用

＄dialog({})而在Vue3.X中，组合式API没有this，不过新增了globalProperties属性，代替了Vue.prototype查看Vue3.X官方文档（https://www.vue3js.cn
Trist丨·2024-01-10 15:55

Vue3不习惯的点及setup免引入便捷操作

随着技术的发展Vue3的应用也是逐渐普及和成熟,记录一下个人改写Vue2项目到Vue3的过程(无ts)目录1.V3的全局挂载2.V3的this3.V3的ref4.V3的".sync"5.V3的ui库(elementPlus
凌晨一点的程序员·2024-01-10 15:24
上一页 44 45 46 47 48 49 50 51 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他