vue3

Vue3

vue3.3.4 + vite4.4.9 1.组件安装 1.1 ElementPlus npm install element-plus --save main.js import ElementPlus from 'element-plus' import 'element-plus/dist/i ......
Vue3 Vue

Vue3 Div 与 v-for 的配合应用,超出自动带滚动条

效果图 代码 <li > <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前会议 [ 0 ]</p></a> <div style="height:80%;overflow:auto;"> <div v-for="(dataI ......
v-for Vue3 Vue Div for

vue3响应式原理

转自:https://blog.csdn.net/qq_51130780/article/details/129424598 响应式的相关知识Vue 3 中的响应式原理是通过使用 ES6 的 Proxy 对象来实现的。在 Vue 3 中,每个组件都有一个响应式代理对象,当组件中的数据发生变化时,代理 ......
原理 vue3 vue

vue3——全局挂载,getCurrentInstance,proxy属性

1. messageTools/index.ts import {ElMessage} from "element-plus" export default { // 普通消息提示 msg(text:any) { ElMessage(text); }, // 成功消息提示 msgSuccess(te ......
getCurrentInstance 全局 属性 proxy vue3

Web 框架Vue3

setUP函数 <template> <div>vue3 写法:{{ value1 }}</div> <br /> <div>vue2 写法:{{ value2 }}</div> <br /> <div> vue3 中的对象: <h5 v-for="(item, index) in obj" :ke ......
框架 Vue3 Web Vue

vue3最基础入门,vue3 + element plus实战pc端后台管理,从零到一设计pc端项目

https://www.bilibili.com/video/BV1C3411s7bV Normalize.css 使浏览器呈现所有 HTML 元素更加一致,并且符合现代 web 标准。Normalize.css 只作用于需要规范化的样式。 https://www.bootcdn.cn/normal ......
vue3 实战 vue 后台 element

在vue3中使用element-plus页面重置报ResizeObserver loop completed with undelivered notifications.

在main.js中 const debounce = (fn, delay) => { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); time ......

vue3 使用 i18n

安装 官网:https://vue-i18n.intlify.dev/api/general.html pnpm add vue-i18n@9 使用 // @/locale/index.ts import appConfig from "@/configure/app.config.ts"; imp ......
vue3 i18n vue i18 18n

在 WebStorm 里调试 vue3 项目

官方说明:https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/#:~:text=We can debug our application,and start the debug session. 打开 ......
WebStorm 项目 vue3 vue

vue3 使用 pinia

安装 pinia 官网: https://pinia.vuejs.org/ pnpm add pinia 使用 新建 pinia 实例 // @/store/index.ts import {createPinia} from "pinia"; import useUserStore from "@ ......
pinia vue3 vue

vue3 使用 vue-router

安装 vue-router pnpm i vue-router 使用 vue-router 创建自己的 router // @/route/index.ts import {createRouter, createWebHashHistory} from 'vue-router' import ty ......
vue-router vue router vue3

vue3+vite+ elementplus项目部署到gitee pages并发布

1.在gitee上新建仓库 命名:demo-vite-vue3 2.把新建的仓库克隆到本地 3.在本地的master分支编写代码并上传 把分支定位在master分支上 通过git工具把本地完成的代码上传到gitee的demo-vite-vue3仓库中去 git pull git add . git ......
elementplus 项目 gitee pages vue3

Vue3 appear 失效 如何使用 appear

最近在学习 vue3 的动画时遇到 appear 无法生效的问题 问题的具体表现: 看以下代码,按理应该来说,如果我们设置 fuct-appear-from,fuct-appea-active 后在元素初始出现时应该会有一个效果 html <Transition name="fuct" appear ......
appear Vue3 Vue

vue3项目中跨域问题

查询之后发现是浏览器的同源策略,跨域了。浏览器的同源策略就是协议、域名、端口都要相同,有一个不同就会产生跨域问题。原本浏览器应该会自动调节端口去获取信息,但我这里将前后台代码都设置一台电脑上,可能端口占用了才产生了问题。解决方案就是在vite.config.js文件中设置一下代理就行了,具体代码如下 ......
项目 问题 vue3 vue

Uniapp学习笔记(vue3)

https://uniapp.dcloud.net.cn/ 使用 Vue.js 开发所有前端应用的框架 开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 周边生态丰富 发送请求 meth ......
笔记 Uniapp vue3 vue

使用vite创建vue3项目

vite是一种新型前端构建工具,能够显著提升前端开发体验,它主要由两部分组成; 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。 ......
项目 vite vue3 vue

uniapp自动引入Vue3(ref,reactive...)的API、uniapp生命周期和封装hooks

未自动导入Vue3(ref,reactive...)的API和uniapp生命周期,需要在每个页面把API和uniapp生命周期的代码都重复写一遍 <script setup> import { ref, reactive } from "vue" import { onLaunch, onShow ......
uniapp 周期 reactive 生命 hooks

Vue3

Vue3介绍 Vue3的变化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking(摇树--清除死代码进行优化) 3.拥抱TypeScrip ......
Vue3 Vue

记录--Vue3 + Fabricjs 定制国庆专属头像

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 生在国旗下,长在春风里!国庆将至,采黎为大家带来 定制头像2.0(国庆头像),让我们用代码的形式为祖国庆生!欢迎大家点赞收藏加关注哦 前言 想看效果或者想定制春节头像的小伙伴请直奔 效果区域; 想一睹定制头像2.0小工具的原理及实现思路请 ......
头像 国庆 Fabricjs Vue3 Vue

vue3项目结合antdesignvue封装form表单及校验

效果图 完整代码 1 <script setup> 2 import { defineProps, onMounted, reactive, ref, defineEmits} from 'vue' 3 import { Card, Input, Select, DatePicker, FormIt ......
表单 antdesignvue 项目 vue3 form

vue3项目table表格动态表头生成+行数据合并

这两处地方是动态的,由后端数据返回 思路流程 1,后端返回数据二次处理 2,根据后端数据生成动态表头 3,利用antd 的 customRender 与 rowSpan 设置行合并 完整代码 <template> <Table :data-source="dataSource" :columns=" ......
表头 表格 项目 动态 数据

Vue3 - provide 提供的异步数据 inject 得到的数据 undefined 或 null

如下所示,父组件(祖先组件)通过 provide 函数向所有后代组件传递 prop。但是这两个 Ref 类型的数据最开始没有,需要等到 onMounted 初始化之后才有值。此时会遇到两个问题 后代组件在 setup 函数中或者 onBeforeMount 等非常早的周期中调用,可能获取的是 und ......
数据 undefined provide inject Vue3

vue3项目封装支持搜索,选中不可选,选中的数据项支持上下移动,删除的上下穿梭的树状穿梭框

1,vue3代码 1 // 这个是返回的所有的数据 2 const sourceItems = ref([]) 3 // 这是穿梭到下面的数据 4 const targetItems = ref([]) 5 // 这是搜索字段 6 const searchName = ref('') 7 // 这两 ......
数据项 上下 项目 数据 vue3

vue3项目结合ant design vue的upLoad组件实现上传和下载Excel文件

1.上传文件 1.组件引入 import { Button, Upload } from 'ant-design-vue' 2. 代码 <Upload v-model:file-list="fileList" name="file" // 限制文件格式 accept=".xlsx,.xls" // ......
组件 vue 文件 项目 design

vue-router使用,localStorage系列,vue3介绍,组合式api和配置项api

1 vue-router使用🐋 # 以后,就是组件的切换实现页面切换的效果 》必须借助于vue-router来实现 # vuex 现在知道的 -<router-view/> 》显示组件 》router/index.js中配置 -<router-link :to="about_url"> 》做 页面 ......
localStorage vue-router vue api router

vue3移动端设置单页面body的背景色

<script setup> import { onBeforeUnmount, onMounted } from 'vue'; // 设置页面背景颜色 onMounted(() => { document .querySelector("body") .setAttribute("style", ......
背景 页面 vue3 body vue

vite+vue3项目发布到手机

1.修改vite.config.js export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, s ......
项目发布 项目 手机 vite vue3

Vue3 element plus el-dialog (对话框)

首先得是 Vue3项目 并已经引入 element plus 引入 element plus 方法:https://www.cnblogs.com/hailexuexi/p/17730724.html 效果图 这个对话框代码 和 头部 菜单 都在 一个 HeaderComponent.vue 文件中 ......
对话框 el-dialog element dialog Vue3

Vue3 引入 Element Plus

Element Plus简介Element Plus是一个基于Vue3的UI组件库,其设计原则可分为一致(Consistency)、反馈(Feedback)、效率(Efficiency)、可控(Controllability)四个方面。 目前Element Plus可使用的UI组件种类丰富,除了按钮 ......
Element Vue3 Plus Vue

vue3 + mark.js | 实现文字标注功能

页面效果 具体实现 新增 1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0或window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于 ......
文字 功能 vue3 mark vue