VUE3

在 vue3 的实际开发中，我们经常会用到 teleport 内置组件来将要展示的模态框传送到 body 等外层元素上挂载并展示，主要解决的一种常见场景为：当前模态框需要更高的层级，但是模态框本身外层元素的 z-index 层级比较低，会导致模态框被其他元素覆盖。 实际使用如下 <button @c ......

前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起，页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。 如上图：支持h5+小程序+App端markdown解析渲染。 上面 ......

```ts import { useThrottleFn } from "@vueuse/core"; export function useWheelRollsUpAndDown( onDown: Function, onUp?: Function, options?: { throttle?: ......

在 Vue3 中，想要监听子组件的 props 变化需要将其先转换为 Ref 类型的值才可以监听。虽然 props 可能是由父组件传递过来的响应式数据，但 props 不是一个响应式的数据。 如下所示： ```ts const props = defineProps({ strHtml: { typ ......

这两个都是vue3引入的响应式数据的api。 但也有区别： 1.ref一般后面跟的是基础数据类型。 而reactive一般都是 对象或者数组 。 示例如下： //基础类型：number const count: Ref<number> = ref(0);//实例对象 const data=react ......

看到这个vueuse库打开新天地后，看到一句warning： Consider using vue-virtual-scroller instead, if you are looking for more features. 于是用起来。 好用，前提是看懂文档 业务需要使用grid，它的grid竟 ......

1.原因 <router-view> 外面使用了 <keep-alive> 导致多次触发 onMounted 生命周期 2.解决 使用<keep-alive> 的第一层 页面 初始化数据的生命周期应该放弃使用 onMounted 应该使用 onActivated 用法与 onMounted 是一样的 ......

禾小毅 csdn博客 【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标的组件封装及调用 【vue3】实现简易的 “百度网盘” 文件夹的组件封装实现 【vue3】 实现 公共搜索组件，在当前页搜索的路由跳转不能改变当前值的操作，使用bus / event-emitter 派发器 ......

用vite创建的vue3项目，用@来代替src不生效。报错：[vite] Internal server error: Failed to resolve import "@/views/xxxxxxxxxxxxx" from "src\views\dashboard\index.vue". Doe ......

## 安装 npm安装方式 ```shell npm init vue@latest ``` pnpm安装方式(二选一) ```shell pnpm create vue@latest ``` 然后设置项目名称,接着选择自己需要的配置,安装完成 ......

可以参考这个回答，亲测有用 https://blog.csdn.net/weixin_43743175/article/details/125892613 ......

npm 创建 只能创建最新的vue3(会引导你添加需要的组件) npm init vue@latest vue-cli 命令行创建(可以选择vue2还是vue3，但是创建出来的是一个空的vue) vue create hello-world vue-cli 可视化创建(可以新建项目，也可以给项目添加 ......

### 一. setup 变量不在写在data里面， 反而在setup内写。 ``` ``` ***ps:*** 1. 使用ref定义字符串，数组等变量值； 2. 变量赋值需要使用.value； ### 二. reactive ``` ``` ***ps*** 1. reactive 接收对象。 2 ......

内容:权限在新增人员时候选择传给后端并且编辑回显 坑: 1.传给后端的权限数组需要传父级id 例如:一级目录下有二级目录和2-2目录,选了2-2目录,需要把一级目录的id也给后端 2.回显的时候后端会把权限数组id都给你(包括一级目录),如果直接回显的话会默认一级下所有目录都选中 代码参考 <el- ......

```html ``` ......

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 按需导入的配置文件 配置文件这里就不再赘述，内容都是一样的，主打一个随用随取，按需导入。 import * as echarts from "echarts/core"; // 引入用到的图表 import { LineChart, ty ......

Vue3中computed的用法 computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。 一、computed简写形式 <template> < ......

vue3 + i18n 安装： npm install vue-i18n yarn add vue-i18n main.js 如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n： import { createApp } from 'vue'import App ......

谈谈Vue3中的ref和reactive ref和reactive是什么？ref和reactive是Vue3中用来实现数据响应式的API一般情况下，ref定义基本数据类型，reactive定义引用数据类型（我喜欢用它来定义对象，不用它定义数组，原因后面讲）我理解的ref本质上是reactive的再封 ......

安装 lottie-web yarn add lottie-web 封装 lottie 组件 <template> <div ref="animation" :style="{ width, height }"></div> </template> <script> import { defineC ......

1.安装库并导入 npm i vue-clipboard3 --save 2.在需要的前端文件中导入 import clipboard3 from 'vue-clipboard3' html结构如下 <template> <div class="hello"> <input type="text" ......

在vite最新版本中使用web3会报错只需要在vite.config.ts添加如下代码即可解决报错 import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@ ......

最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目，但都是基于vue2开发。随着vite.js破局出圈，越来越多的项目偏向于vue3开发，就想着uniapp搭配vite4.x构建项目效果会如何？经过一番尝试果然真香~ 版本信息 HBu ......

一，开发环境中的配置: 1,前端:vue的vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, p ......

建个工具类，以进行不同地方的调用复用。 调用方式,options参数的使用看自个的需求。 html调用方式 ```html 复制我 ``` vue组件调用方式 ```vue 复制我 ``` 工具类 ```js import ClipboardJS from 'clipboard' import { ......

# 方式一： - main.js 设置全局变量 ``` import api from '@/api' app.config.globalProperties.$api = api ``` - 使用全局变量，使用 getCurrentInstance 方法。 ``` // ctx.$api 就是全局 ......

``` Click me ``` ......

## create-vue create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应。 执行如下命令，这一指令将会安装并执行 create-vue `npm init vue@latest` > 无论您之前是否安装过create-vue，执行n ......

1，出错原因，找不到文件 npm install --save @/api/baseInfo/department //这个目录没有文件 2.packjson 中那么没改，不知道为什么 E:\gh-phm\ruoyi-ui\node_modules\normalize-package-data\li ......

activated和deactivated是Vue3中的两个生命周期钩子函数。 activated钩子函数在组件被激活时调用，通常用于恢复组件的状态或执行一些初始化操作。例如，如果一个组件被从路由中激活，你可能需要在该组件被激活时从本地存储中加载一些数据。 下面是一个示例代码： <template> ......