❤️❤️--vue3 第20页

搭建 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前端开发，element-plus前端框架探秘:scope对象

vue3前端开发，element-plus前端框架探秘:scope对象！

yrldjsbk·2024-02-02 08:31

前端框架简介及Vue3项目起步基础配置

前端框架简介及Vue3项目起步基础配置前端框架简介Vue1.1Vue脚手架1.1.1使用vue-cli创建vue2项目1.1.2使用create-vue创建vue3项目1.1.3项目起步-配置别名路径联想提示

前端小白进阶之旅·2024-02-02 07:08

vue3 element-plus 将路由和激活菜单绑定

{{item.meta.title}}import{onMounted,ref}from'vue';import{useRouter,useRoute}from'vue-router';constrouter=useRouter();constactiveMenu=ref('');//当前激活的菜单按钮constpersonalDetailMenuList:any=[//路由信息{path:'/l

不爱吃饭爱吃菜·2024-02-02 07:22

在Vue 3中，理解使用defineEmits函数来定义组件的事件。

在Vue3中，可以使用`defineEmits`函数来定义组件的事件。`defineEmits`函数接受一个对象作为参数，该对象的键是事件名，值是一个回调函数或一个函数数组。

_沐晨·2024-02-02 07:21

【Vue3+Vite】Vue生命周期与组件快速学习第三期

文章目录一、Vue生命周期1.1生命周期简介1.2生命周期案例二、Vue组件2.1组件基础2.2组件化入门案例2.3组件之间传递数据2.3.1父传子2.3.2子传父2.3.3兄弟传参总结一、Vue生命周期1.1生命周期简介每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数

道格维克·2024-02-02 07:15

vue3页面跳转产生白屏，刷新后能正常展示的解决方案

可以依次检查以下问题：1.是否在根组件标签最外层包含了个最大的div盒子包裹内容。2.看看是否在template标签下面直接有注释，如果有需要把注释写到div里面。（即根标签下不要直接有注释）3.在router-view中给路由添加key标识。！！注意：有使用layout封装布局的，是在layout下的主页面中的router-view添加标识，不是在src根目录下main.vue中修改（在这个文件

不爱吃饭爱吃菜·2024-02-02 07:42

【前端-VUE+TS】Vue3组件化-下（五）

一.插槽的使用1.1.认识插槽slot在开发中，我们会经常封装一个个可复用的组件：前面我们会通过props传递给组件一些数据，让组件来进行展示；但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；比如某种情况下我们使用组件希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；我们应该让使用者可以决定某一块区域到底存放什么内容；举个栗子

我自闭了？·2024-02-02 05:54

【前端-VUE+TS】Vue3组件化-知识补充（六）

一.动态组件比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示；案例截图这个案例我们可以通过两种不同的实现思路来实现：方式一：通过v-if来判断，显示不同的组件；方式二：动态组件的方式；1.1.v-if显示不同组件我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：{{tab}}importHomefrom"./pages/Home.vue";