vue3项目实例第20页

Vue3 vant4 底部tabbar图标如何修改为自定义图片

1、引入静态图并作为变量使用2、制作数据结构用于v-for遍历记得每个tabbar准备两个图片，默认和选中。3、safe-area-inset-bottom是vant4移动端底部安全区适配，如果不需要则去掉。4、tabbar的详细参数请看官方文档https://vant-ui.github.io/vant/#/zh-CN/tabbarimport{ref}from'vue'//1、引入项目静态图，

HaushoLin·2024-02-02 22:59

Vue3如何深度修改vant4 css样式

1、当前页面只用一次某个组件vue2是::v-deep.vant-button{}vu3则是::v-deep(.vant-button){}页面示例回到顶部::v-deep(.van-button){background-color:orange;}}2、页面多次使用同个组件，如何修改其中一个，而不改变其他组件原本的样式。例如下面我们只修改productBox下的button，在它外层包裹一个di

HaushoLin·2024-02-02 22:58

Vue3 vant4 解决引入的Toast和dialog样式丢失的bug

情景再现：正确做法：在main.ts中单独引入import'vant/es/toast/style'import'vant/es/dialog/style'import{Toast,Dialog}from'vant'app.use(Toast)app.use(Dialog)效果如下轻松拿下。

HaushoLin·2024-02-02 22:56

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线组件库的el-tree样式由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造参考的博客并做了一部分优化

Thurmanwang·2024-02-02 22:08

菜鸡后端的前端学习记录-2

忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】（学习记录第二部分，都写到一个博客里太长了，不利于阅读复习

无名一小卒·2024-02-02 21:30

docker 安装 nginx 发布Vue项目

直接映射会出错）5.停止运行容器并删除容器6.重新启动容器（映射相应的目录文件）7.访问默认页面8.发布Vue项目9.配置反向代理（前后端分离，基本上都需要反向代理来解决跨域问题）10.实战案例：发布开源项目vue3

文子阳·2024-02-02 20:51

使用 vite、typescript、vue3、element-plus、pinia、vue-router、axios、tailwindcss 等技术搭建一个基本的项目模版

介绍使用vite、typescript、vue3、element-plus、pinia、vue-router、axios、tai

zhfy啊·2024-02-02 20:42

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

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

蹦哒·2024-02-02 20:41

搭建 vite + vue3 + ts + pinia 项目框架

一、创建项目安装vitenpmivite-g复制代码创建项目一步创建npm6.xnpmcreatevite@latestmy-vue-app--templatevue-tsnpm7+,extradouble-dashisneeded:npmcreatevite@latestmy-vue-app–--templatevue-tsyarnyarncreatevitemy-vue-app--templa

JackieChan_·2024-02-02 20:41

vue3+vite+ts使用pinia

你开心的样子我好喜欢·2024-02-02 20:41

vue3+vite+ts+pinia+windicss开箱即用脚手架

脚手架传送门项目整体采用vue3compositionapi+vite+pinia+vue-router+windicss+eslint+prettier+tslint希望大佬们看看有什么可以补充的

「已注销」·2024-02-02 20:11

我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

前言聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。项目背景最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2+Js+Webpack+Vuex上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基本的开发程序员

Coder HoMeTown·2024-02-02 20:10

vue3+ts+vite+pinia 项目搭建

1.起始，项目搭建yarn创建项目yarncreatevitepnpm安装依赖（如果没有可以用npm）//mac安装pnpmsudonpmi-gyarn//安装依赖pnpmi//启动项目yarndev//安装一下pretter和eslintpnpmiprettiereslinteslint-config-prettiereslint-plugin-prettiereslint-plugin-vue

hjseo_seg·2024-02-02 20:40

从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架

项目代码以上传至码云，项目地址：https://gitee.com/breezefaith/vue-ts-scaffold文章目录前言脚手架技术栈简介vue3TypeScriptPiniaTailwindCSSElementPlusvite

偏安zzcoder·2024-02-02 20:09

Vue3_基础使用_2

这节主要介绍：标签和组件的ref属性，父子组件间的传递值，ts的接口定义，vue3的生命周期1.标签的ref属性。

Evan.Pei·2024-02-02 20:23

Vue3_基础使用_1

这节主要介绍：vue2与vue3的区别，创建响应式的数据，setup语法糖的使用，watch监听，及vue3创建项目。

Evan.Pei·2024-02-02 20:53

关于node.js奇数版本不稳定将11.x.x升级至16.x.x不成功的一系列问题（一）

据说vue2用16稳定一些vue3用18好一点（但之前我vue3用的16.18.1也可以）为维护之前的老项目先搞定node版本切换下载nvmnode版本管理工具https://github.com/coreybutler

猴小七儿·2024-02-02 19:51

Vue3+vite搭建基础架构（3）--- 使用dayjs

Vue3+vite搭建基础架构（3）---使用dayjs说明官方文档vite.config.js别名配置安装dayjs安装命令使用dayjs将dayjs封装为自己的日期工具类使用dataUtil.js日期工具类示例说明这里记录下自己在

谁不想飞舞青春·2024-02-02 19:17

Vue3+vite搭建基础架构（4）--- 使用axios

Vue3+vite搭建基础架构（4）---使用axios说明官方文档安装axios安装命令使用axios测试参数以对象形式传参测试参数在url地址后面拼接传参说明这里记录下自己在Vue3+vite的项目使用

谁不想飞舞青春·2024-02-02 19:17

Vue3+vite搭建基础架构（5）--- 使用vue-i18n

Vue3+vite搭建基础架构（5）---使用vue-i18n说明官方文档安装vue-i18n使用vue-i18n测试vue-i18n的国际化配置说明这里记录下自己在Vue3+vite的项目使用vue-i18n

谁不想飞舞青春·2024-02-02 19:14

基于Node.js+Vue3+MongoDB 实现企业门户管理后台

技术栈:Vue3全家桶Node.jsExpress框架MongoDB数据库主要需求首页个人中心用户管理（管理员才有权限)产品管理新闻管理前端：Vue作为基础框架vue-router控制路由（hash模式

safe030·2024-02-02 18:15

vue3 + element-plus + koa2 实现图片上传至七牛云

koa2后端代码准备工作：安装koa-multerkoa-qiniukoa-uuid命令：npmikoa-multerkoa-qiniukoa-uuid-S1、新建utils文件夹新建QiniuConfig.js文件存放七牛云配置信息letQINIU={};QINIU.accessKey='xxx';//七牛的accessKeyQINIU.secretKey='xxx';//七牛的secretKe

0kime·2024-02-02 18:56

Vue3自定义指令的那些事（手把手教学）

今天呢想来和大家分享一下Vue3中的自定义指令这一小块知识点。我会分享一些我工作中经常用到的知识点，内容相对简单，还请大佬们手下留情。

勇宝趣学前端·2024-02-02 18:24

前端必知必会（一）：vue3+node实现网站支付功能

在我上学那会当时写过一个小网站，初衷是分享自己的学习经验。后台随机学习的不断深入，有把网站做一个支付功能。当时这是想但是一直没有实现这个想法。那时认为支付是一个很复杂的功能，今天我就想简单来了解一下支付的一个实现过程，案例中我采用的是沙箱，之前只是听过，编码使用Vue和Node想结合。写的不好，大家多多批评。下边是我找的两个对我们开发有帮助的网址支付宝开放平台：https://open.alipa

勇宝趣学前端·2024-02-02 18:54

Vue3+Koa2实现图片上传（不再畏惧）

大家好，我是勇宝，一个热爱前端的小学生，年关将至，提前祝大家新年快乐。今天呢，我们就来好好的啃一啃图片上传，从一个前端开发者的角度来探讨一下图片上传前后端到底都做了哪些事情。文章目录一、技术摘要二、图片上传流程概述1.前端2.后端三、项目搭建前端1.初始化Vue后端（koa2）1.全局安装脚手架2.初始化项目3.运行四、开始撸代码1.编写html骨架2.定义回显元素3.编写选择按钮逻辑4.回显选择

勇宝趣学前端·2024-02-02 18:51

vue3的element-plus在外部自定义指示器切换轮播图(走马灯)

-----自定义指示器----------内容-----内容{{item}}import{ref}from'vue'constcarousel=ref()constcurrentIndex=ref(0)//轮播图自动切换，赋值为自定义指示器constchangeHandle=(e)=>{currentIndex.value=e}//通过自定义指示器切换，赋值给轮播图constchangeIndic

前端路上迷茫的小鲨鱼·2024-02-02 18:21

Vue3+ThreeJS的简单使用

1.介绍Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。github地址three.js官网three.js中文文档2.应用场景智慧城市智慧园区大屏数据可视化3D看房小游戏3.使用3.1下载Three.js//通过CDN方式引入//使用npm下载npminstall--savethree//在要使用的页面中引入

无敌暴龙神~·2024-02-02 16:04

vue3从0动态滚动到指定数字

[vue3从0动态滚动到指定数字](animated-number-vue3-npm(npmjs.com))image.png1.安装$npminstallanimated-number-vue3$yarnaddanimated-number-vue32

肖_53e4·2024-02-02 15:47

Vue3源码解读之patch

例子代码本篇将要讲解domdiff，那么咱们结合下面的例子来进行讲解，这个例子是在上一篇文章的基础上，加了一个数据变更，也就是list的值发生了改变。html中增加了一个按钮change，通过点击change按钮来调用change函数，来改变list的值。例子位于源代码/packages/vue/examples/classic/目录下，下面是例子的代码：constapp=Vue.createAp

yyzzabc123·2024-02-02 15:24

vue3.0源码解析，patch&diff过程

什么是patch在浏览器中，每次操作dom，都会引起一次重绘重排过程，如果短时间进行多次操作，对性能损耗很大，容易引起卡顿。在vue中，使用虚拟dom(Virtualdom)，来对真实dom的一种抽象化处理的树结构，模拟真实dom，提升性能。而在更新dom节点时，通过对虚拟dom的对比diff（如果是更新操作）来进行对虚拟dom结构的增删改的一系列操作流程，就是patch过程。前置了解在解读源码之

柯闪电·2024-02-02 15:47

vue3 源码解析（6）— lifecycle 生命周期的实现

前言对于vue3的生命周期，我们经常性会去疑问，生命周期有哪些呢，它是怎么去实现的，又是什么时候调用的。

Avicli·2024-02-02 15:46

vue3 源码解析（5）— patch 函数源码的实现

什么是patch在vue中patch函数的作用是在渲染的过程中，比较新旧节点的变化，通过打补丁的形式，进行新增、删除、移动或替换操作，此过程避免了大量的dom操作，提升了运行的性能。patch执行流程patch函数整体流程比较长，函数内部包含很多分支用于处理不同的节点（Text、ELEMENT、COMPONENT）。为了便于理解，文章中的代码皆为简化之后的代码：/****@paramn1上一次渲染

Avicli·2024-02-02 15:43

【Vue3】尚硅谷（天禹老师主讲）Vue3笔记

本文是主要内容为转载，对其中部分内容进行了代码解析只为记录学习过程，共享学习Vue3快速上手1、Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、

SuperYiY·2024-02-02 15:10

vue3 props 声明默认值

interfaceObjType{size:number,limit:number,auto:boolean}interfaceProps{msg?:stringlabels?:string[],obj:objType}constprops=withDefaults(defineProps(),{msg:'hello',labels:()=>['one','two'],obj:()=>{retur

寂寞沙洲冷1号选手·2024-02-02 15:40

Vue3的Props

Vue3中的props是用于接收父组件传递的数据的属性。在Vue3中，props的声明发生了一些改变：使用props选项来声明props。

跟Bug双向奔赴·2024-02-02 15:38

安装jar包到maven本地仓库的基本步骤

1.jar名字和所在目录2.输入导包脚本mvninstall:install-file-Dfile=E:\resources\6、SpringBoot3+Vue3全套教程\02_资料\02_Bean注册资料

墨殇离陌·2024-02-02 13:53

Vue3 + vite + Ts + computed（计算属性）和 watch（侦听器）的简单使用方法

Vue3+vite+Ts+computed（计算属性）和watch（侦听器）的简单使用方法computed：计算属性计算属性就是当依赖的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候

W.Y.B.G·2024-02-02 13:39

vue3.0、cli4项目引入element plus

element团队为新版的vue-cli4准备了相应的ElementPlus插件安装依赖npminstallelement-plus--savemain.js全局引入，样式文件需要单独引入import{createApp}from'vue'importElementPlusfrom'element-plus';import'element-plus/lib/theme-chalk/index.cs

aら　淼·2024-02-02 12:29

在vue3中element-plus如何设置el-table默认全选

首先我们使用ref引用el-table标签然后在挂载函数中调用el-table的函数toggleAllSelection，即可实现全部勾选import{ref}from'vue'consttable=ref(null);onMounted(()=>{table.value.toggleAllSelection();})

呆鱼敲代码·2024-02-02 12:51

ASP.NET Core WebAPI_解决跨域问题(前端后端)

说明我的前端框架为Vue３前后端跨域选其一即可前端跨域在项目的根目录找到vite.config.js文件，添加代码：server:{proxy:{'/api':{target:'https://localhost

Mudrock__·2024-02-02 12:07

使用vue3结合requestAnimationFrame计算网页的帧数FPS

每跑完一次requestAnimationFrame，就说明跑完一帧了，所以我们只需要计算出：一秒内跑了多少次requestAnimationFrame即可import{Ref,ref}from'vue';exportinterfaceUseFpsOptions{every?:number;}exportconstuseFps=(options?:UseFpsOptions):Ref=>{cons

打工人小夏·2024-02-02 12:23

[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki

解决谷歌浏览器警告vue3项目中使用Element-Plus的表单form校验单的时候，浏览器出现以下警告：[Violation]Addednon-passiveeventlistenertoascroll-blocking

qq_39196447·2024-02-02 11:27

vue3 Uncaught SyntaxError: Unexpected token . 部分老版本浏览器报错

vue3代码中使用?.可选链操作符和空值合并运算符??

qq_39196447·2024-02-02 11:56

vue3+element-plus动态路由菜单

1、展示效果图2、创建组件SideMenu.vue{{item.mate.title}}{{item.children[0].mate.title}}1":index="item.path">{{item.mate.title}}import{ref}from'vue';import{useRouter}from'vue-router';defineProps(['menuList']);cons

qq_39196447·2024-02-02 11:56

vue/cli脚手架搭建的vue3项目兼容低版本谷歌浏览器

vue/cli搭建的vue3项目找到项目中的.browserslistrc文件，增加一行chrome>48（版本号可以自行修改）>1%last2versionsnotdeadnotie11chrome

qq_39196447·2024-02-02 11:26

vue3 watch和watchEffect

Watch监听ref定义的数据1.ref数据基本数据类型letsum=ref（0）conststopWatch=watch（sum,(new,old)=>{If(new>=10){stopWatch()}console.log(‘sum数据变化了’)}）2.ref数据为对象类型,监听的是对象的地址值,若想监听对象内部属性值的变化，需要手动开启深度监视letperson=ref（{name：’张三’

艺逸&福兜·2024-02-02 10:42

【Vue3实战】setup语法糖实战基础

【Vue3实战】setup语法糖前言一、setup语法糖的优势1.更清晰的逻辑组织2.更好的类型推断和IDE支持无需导入自动注入组件的上下文更好的类型推断3.更灵活的组合逻辑4.更好的响应式能力二、Vue2

愛彈吉他的小盆友·2024-02-02 09:17

vue3-深入组件-插槽

插槽Slots组件用来接收模板内容插槽内容与出口元素是一个插槽出口(slotoutlet),，标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。插槽内容可以是任意合法的模板内容，不局限于文本。例如我们可以传入多个元素，甚至是组件： Click me! 渲染作用域插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。举例来说：{{ message }}{

王大可996·2024-02-02 09:39

vue3-深入组件-依赖注入

Prop逐级透传问题通常情况下，当我们需要从父组件向子组件传递数据时，会使用props。如果是多层级嵌套的组件，如何从一级传递到3级甚至更远呢。若使用props则必须将其沿着组件链逐级传递下去，这会非常麻烦，所以被称为“prop逐级透传”，显然是我们希望尽量避免的情况。解决方案：provide和inject可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件

王大可996·2024-02-02 09:36

vue3 json代码及字符串 v-code-diff对比插件

vue3json代码及字符串v-code-diff对比插件安装pnpminstall--savev-code-diff在main.ts中引入importCodeDifffrom"v-code-diff"app.use

Shero.李建业·2024-02-02 09:03

推荐频道

vue3项目实例