vue3搭建项目第37页

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

1，父传子constprops=defineProps({type:{default:'edit',type:String,},});标签vue3（中没有this）父子组件传参单个父子传参子组件多个父子传参用

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

Vue3使用

1、列表实现详情修改vue3中无法使用slot-scope的问题vue2：上下对应，title是自己随便起的名字1、定义一个普通的插槽，可以用div，任何标签2、定义一个element列表里面插槽的标签

Best_Liu~·2024-01-19 13:47

vue3 自动下载使用 iconify图标以及自定义svg图标

开发中经常使用图标，通过unplugin-icons插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。具体操作步骤一、安装包npmi-Dvite-plugin-svg-iconsunplugin-iconsunocss二、自定义组件SvgIconimporttype{CSSProperties}from'v

少十步·2024-01-19 13:05

Unocss(原子化css) 使用及vue3 + vite + ts讲解

Unocss简单使用首先初始化一个vite项目使用pnpm安装1pnpmcreateviteunocss-demo----templatevue-ts使用npm安装1npminitvite@latestmy-vue-app----templatevue使用yarn1yarncreatevitemy-vue-app--templatevue下载Unocss依赖安装unocss和三个预设，第一个是工具

sinat_40572875·2024-01-19 13:04

使用CSS计算高度铺满屏幕

以上图片是我要解决的问题正文目前使用的是vue3+setup语法糖解决方案一：用窗口高度动态计算高度在html里动态绑定高度样式window.innerHeight获取窗口高度注意使用了几种高度，如s

不想起名55·2024-01-19 11:54

【前端框架】Vue3合集

一、Vue3初识1、create-vuecreate-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供极速响应前置条件：16.0或更高版本的Node.js安装并执行

wmh1024·2024-01-19 11:09

若依 ruoyi-vue3+ts-plus+ 宇道 yudao-ruoyi-vue-pro 数据权限设置

实现效果：自己创建的接口功能，设置只有自己部门的人才可以看自己部门的数据，基于【部门】过滤数据权限的表。系统管理--角色管理--数据权限1.新建一个表dept_id必须要有。2.生成代码3.DataPermissionConfiguration.java找到这个文件，添加rule

三块钱0794·2024-01-19 10:29

vue3和ant-design-vue的＜a-form＞表单自定义规则校验封装

//使用ant-design-vue里面的rules属性增加校验$refs.formBox">//a-form-item外面包裹a-row和a-col是为了利用其调整每个表单元素的距离improt{ref,reactive}from'vue'//引入封装的自定义校验js文件import{validateName,validateAge}from'./rules'constformState=rea

小王讨厌洋葱·2024-01-19 10:19

element-plus+vue3+echarts实现自适应可视化大屏

安装autofit.js、echartsnpminstall--saveautofit.js生产作业可视化大屏{{percentage}}%{{t('page.完成率')}}{{item.name}}{{item.value}}▋要货单▋调拨订单/销售订单▋发货通知单▋库存调拨入库单▋配送单import{reactive,onMounted,ref,watch}from'vue'import{i1

江湖人称大佬·2024-01-19 10:16

vue3中reactive和ref函数及对比

reactive和ref函数1.reactive接受对象类型数据的参数传入并返回一个响应式的对象//导入import{reactive}from'vue'//执行函数传入参数变量接收conststate=reactive({msg:'thisismsg'})constsetSate=()=>{//修改数据更新视图state.msg='thisisnewmsg'//不需要.value}{{state

香香爱编程·2024-01-19 10:11

vue3的创建及认识

1、创建项目使用creat-vue搭建vue3项目2、认识creat-vuecreate-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供极速响应3、创建create-vue

香香爱编程·2024-01-19 10:06

vite vue3项目打包如何跳过ts检查并进行打包

vitevue3项目打包如何跳过ts检查并进行打包将vue-tsc打包检查命令干掉{"name":"data-service2.0","type":"module","version":"1.0.0-beta

Shero.李建业·2024-01-19 10:51

Vue3 + Vite 打包优化及配置

Vue3+Vite搭建企业级开发脚手架【目录篇】Vue3Element-PlusJson配置一站式生成动态表单CSS工程化配置我们刚接触前端时候，提到前端样式，首先会想到的就是原生CSS；随着技术的迭代更新

qq_30379395·2024-01-19 10:46

vue3实现元素拖拽移动功能

一、效果如下：二、思路和步骤：整体思路是在鼠标按下时计算初始偏移值，并在拖拽过程中更新div元素的位置，通过事件监听器实现拖拽效果。（1）用户点击触发拖拽：当用户点击可拖拽的div元素时，通过mousedown事件触发startDrag函数。（2）初始化变量：startDrag函数初始化一些变量，包括水平和垂直方向上的偏移值，以及拖拽状态。（3）引入倍率调整偏移值：在鼠标按下瞬间，通过计算初始偏移

Miraitowa_chole·2024-01-19 10:12

vue3学习笔记 -- vuex4

vuex4是vue3的兼容版本，提供了和vuex3的相同API。因此我们可以在vue3中复用之前已存在的vuex代码。

前端人_倩倩·2024-01-19 09:50

【vue3项目初始化配置】vue3 + element plus

项目初始化是开发过程中很重要的一个环节，本篇博客带大家从零开始创建并初始化一个vue3项目，文章详细介绍了每个步骤，希望能帮助刚接触开发的小伙伴。

余炜yw·2024-01-19 09:25

使用Docker搭建项目管理系统-Redmine

使用Docker搭建项目管理系统-Redmineredmine简介特点环境准备数据库进行初始化启动redmine应用开放10083端口参考地址介绍的比较详细（含括下面所有方式）：https://github.com

Mr.徐大人ゞ·2024-01-19 08:38

【Vue3源码】第四章实现isReadonly和isReactive

【Vue3源码】第四章实现isReadonly和isReactive前言上一章节我们实现readonlyAPI，并且优化之前写的reactiveAPI。

顽皮宝·2024-01-19 07:59

react中父组件如何直接调用子组件的方法和属性,以及对比vue3.0父组件调用子组件的方法和属性

react中父组件如何直接调用子组件的方法和属性,以及对比vue3.0父组件调用子组件的方法和属性reacthookvuesetup父组件子组件reacthookforwardRef(render)useImperativeHandle

miao_zz·2024-01-19 07:29

#vue3 实现前端下载excel文件模板功能

一、需求：前端无需通过后端接口，即可实现模板下载功能。通过构造一个JSON对象，使用前端常用的第三方库xlsx，可以直接将该JSON对象转换成Excel文件，让用户下载模板二、效果：三、源码如下：npminstallxlsx下载模板import*asXLSXfrom'xlsx';constwriteFileAsync=(workbook,filename,options)=>{returnnewP

Miraitowa_chole·2024-01-19 06:30

Vue3封装可拖拽的弹窗

核心代码（复制就可以使用了）{{title}}Ximport{computed,ref}from'vue';const{width,height,title}=defineProps({width:{type:String,default:'623px',},height:{type:String,default:'379px',},title:{type:String,default:'',},

七月_Mo·2024-01-19 06:25

vue3.0 使用inject(“reload“)刷新页面

（1）在app.vueimport{defineComponent,ref,nextTick,provide}from'vue';exportdefaultdefineComponent({setup(){//局部组件刷新constisRouterAlive=ref(true);constreload=()=>{isRouterAlive.value=false;nextTick(()=>{isR

墨尔本斌·2024-01-19 04:12

vue3 —— script setup 语法糖

是vue3的新语法糖，并不是新增的功能模块，只是简化了以往的组合式API必须返回(return)的写法，并且有更好的运行时性能。

玛卡巴卡吐口水·2024-01-19 03:49

若依框架学习

1、若依框架前后端分离版服务器部署，前端nginx的配置2、RuoYi(若依)前后端分离版本，windows下部署（nginx）3、若依：IDEA下（若依前后端分离版Vue3）添加新模块4、若依Nginx

chxljtt·2024-01-19 03:30

vscode创建代码片段 vue3modal

{//Placeyour全局snippetshere.Eachsnippetisdefinedunderasnippetnameandhasascope,prefix,bodyand//description.Addcommaseparatedidsofthelanguageswherethesnippetisapplicableinthescopefield.Ifscope//isleftemp

Jay_帅小伙·2024-01-19 02:55

NodeJS安装

前言：因为java行业不景气，人才严重过剩，像我我这样的人，只能选择往广度走走，开始学Vue3.Vue3现在默认要NodeJs版本16及以上，所以我这里安装了18.18.0的，目前逛网最新稳定版本是20

Puddy_Q·2024-01-19 01:43

vue3 知识

vue3介绍Vue3的变化:1、vue3完全兼容vue2，但是vue3不建议用vue2的写法2、拥抱TypeScript，ts完全兼容js3、组合式API和配置项APIvue2是配置项apivue3组合式

糖果爱上我·2024-01-19 00:59

Vue3前端h5移动端页面预览PDF使用pdfjs-dist，添加自定义文本水印

pdfjs-dist版本[email protected]{ref,onMounted,watch}from'vue'import{useRoute}from"vue-router";import*aspdfjsLibfrom'pdfjs-dist'constroute=useRoute()//！pdfjsLib.GlobalWorkerOptions.workerSrc=

Amodoro·2024-01-19 00:50

Vue3/Vue2实现文章内容中多个“关键词“标记高亮显示

一、实现效果下拉列表高亮展示关键词二、实现思路安装“vue-word-highlighter”，这是一个支持Vue3和Vue2，不过Vue2版本是通过vue-demi构建的三、案例代码package.json"vue-word-highlighter

在路上`·2024-01-18 23:37

electron+vite+vue3 快速入门教程

文章目录前言一、electron是什么？二、electron进程模型1.主进程2.渲染进程3.预加载脚本4.进程通信4.1send+on（单向）4.2invoke+handle(双向)4.3主进程向渲染进程发送事件三、窗口创建与应用事件四、技术栈和构建工具五、electron-vite安装1.环境要求2.安装3.快速安装4、目录结构5、公共资源和引用主进程引用公共资源6、vue-router、pi

pixle0·2024-01-18 22:33

Vue3动态组件component的基本使用以及注意事项

官方定义首先看一下官方的定义这是一个类似于组件的“元组件”，渲染的内容由is接收到的参数进行决定的。通过字符串渲染HTML元素HTML的h1标签和内容我们可以看到通过传递一个HTML标签名称的字符串给is属性会渲染成传入的HTML标签，内容为component标签包裹的内容。通过字符串渲染组件importFoofrom'./Foo.vue'importBarfrom'./Bar.vue'expor

躺平阿福·2024-01-18 22:51

Web3 Vue3连接MetaMask(小狐狸)钱包Request of type ‘wallet_requestPermissions‘ already pending for origin过程记录

下载web3依赖yarnaddweb3连接申请window.ethereum.request({method:'eth_requestAccounts'}).then((res:any)=>{console.log(res,'这就是小狐狸地址')}).catch((err:any)=>{console.log('44',err)if(err.code===-32002){//用户在申请连接时既没有

躺平阿福·2024-01-18 22:51

vue3前端开发,生命周期函数的基础练习

vue3前端开发,生命周期函数的基础练习！下面先给大家看一个图片，帮助大家了解，vue3的生命周期函数，和旧版本vue2的生命周期函数，有什么变化。

yrldjsbk·2024-01-18 20:37

vuex前端开发,看完这篇文章透彻明白vuex几大属性

声明：以下代码风格，是按照vue3的组合式api开展的。请大家知悉。import{useStore}from'vuex'import{computed}from'vue'/***混合学习钱情提

yrldjsbk·2024-01-18 20:36

Vue3前端开发,watch侦听器的深度监听和精确监听

Vue3前端开发,watch侦听器的深度监听和精确监听！今天和大家分享的内容是，关于watch的深度侦听和精确监听。首先看一下，第一个案例，练习的是，深度监听的效果。

yrldjsbk·2024-01-18 20:36

vue3.0的学习

一.创建vue3.0工程1.使用vue-cli创建##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g

未成年梦想·2024-01-18 20:05

vue2+webpack升级vue3+vite，报错Cannot read properties of null (reading ‘isCE‘)

正文开始前言问题分析解决总结前言系列文章：vue2+webpack升级vue3+vite，修改插件兼容性bug前面的文章主要是介绍，在升级初始阶段遇到的一些显而易见的兼容性问题和bug。

中二少年学编程·2024-01-18 20:03

vue3前端开发，自学一下reactive,ref的差异是什么。

vue3前端开发，自学，学习一下，reactive和ref的差别。以及基础用法。前言，这2个东西，都能对外输出动态的数据对象。

yrldjsbk·2024-01-18 20:33

Vue3实现PDF文件预览（低版本浏览器兼容）

方案：Vue3+pdfjs-dist+canvas1.pdfjs-dist展示PDF文件的原理解释pdfjs-dist

码农键盘上的梦·2024-01-18 20:53

15分钟学会Pinia

语法和Vue3一样，它实现状态管理有两种语法：选项式API与组合式API，我们学习组合式API语法。

聪明的竹子·2024-01-18 20:49

Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

功能：Vue3在点击菜单切换路由时，将页面el-main的内容滚动到顶部，布局如下，使用UI组件库为ElementPlus在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop

码农键盘上的梦·2024-01-18 20:17

vue3 vue-router 钩子函数

全局路由守卫（vue-router4.0中将next取消了，可写可不写，returnfalse取消导航，undefined或者是returntrue验证导航通过）router.beforeEach((to,from)=>{}),next是可选参数，可写可不写，returnfalse是取消导航，如果返回值为true或者是undefined意味着通过验证(路由跳转之前拦截)router.afterEa

wyyyyy11·2024-01-18 19:43

【vue3 vue-router 钩子函数】

vue3vue-router钩子函数全局路由守卫（vue-router4.0中将next取消了，可写可不写，returnfalse取消导航，undefined或者是returntrue验证导航通过）router.beforeEach

秃头的小靓仔·2024-01-18 19:09

vue3 系列：Vue3 官方文档速通

前言：参考Vue官方文档，本文档主要学习组合式API。一开始1.简介1.1什么是Vue？一款JS框架，并有两个核心功能：声明式渲染、响应性。1.2渐进式框架根据不同的需求场景，使用不同方式的Vue，比如：无需构建步骤，直接引入vuejs。在任何页面中作为WebComponents嵌入使用构建步骤，单页应用(SPA)全栈/服务端渲染(SSR)Jamstack/静态站点生成(SSG)开发桌面端、移动端

yqcoder·2024-01-18 18:20

[vue3快速入门] 6.使用vue cli创建项目

之前的教程里，我们都是使用script标签引入vue，然后我们的代码也写在script标签里面，但是在我们的正常工作中是不会用这种方式开发的，所以现在我们来学习正式工具的使用，vuecli，它是一个vue命令行工具，集成了我们日常工作中常用的功能。下面请小伙伴们系好安全带，我们的车速要加快了。不过还没有安装node的小伙伴先请下车，点击链接去安装node。。。https://nodejs.org/

林哥学前端·2024-01-18 18:33

【开源项目推荐】8.9K纯中文本地GPT知识库搭建项目

大数据流动·2024-01-18 17:15

vue3+vite+ts+pinia 后台管理项目总结

前言近期准备面试中，觉得项目经验这里还需要再次总结，也参考了很多jym的文章，在这里如果发现有引用且介意，请联系我VUE3+VITE+TS项目中的要点使用vue3+vite+ts构建项目基础框架，配置代码运行环境

子伟-H5·2024-01-18 17:15

vue3 实现简单计数器示例——一个html文件展示vue3的效果

目的：作为一个新手开发，我想使用Vue3将代码封装在HTML文件中时，进行界面打开展示。

☆七年·2024-01-18 17:26

Vue3 el-table 如何动态合并单元格

import{ref,toRefs,reactive,nextTick,computed,watch,onMounted}from"vue";consttableData=[//一年级{area:"华北",province:"北京",month_1:"100",month_2:"张三",month_3:"90"},{area:"华北",province:"北京",month_1:"200",mon

Mr_TianSDQ·2024-01-18 17:40

Vue3 动态设置 ref

el-tabs中如果用v-for动态增加tab，每个tab中如果需要控制自己控件的增删改查，就需要设置动态ref.1.先定义一个空字典：constinputRefMap=ref({});2.然后定义一个方法将变量增加到字典中：consthandleSetInputMap=(el:refItem,item:number)=>{ if(el){ inputRefMap.value[`Input_Re

Mr_TianSDQ·2024-01-18 17:38

推荐频道

vue3搭建项目

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