vue
文章平均质量分 91
梳理VUE框架,提升开发效率
球球不吃虾
合抱之木,生于毫末;九层之台,起于垒土;千里之行,始于足下。
展开
-
深入理解vue组件生命周期,你一定要看到最后,最后有深入探讨
与 Vue 2 相比,Vue 3 对生命周期钩子进行了一些调整和优化。最显著的变化是将一些钩子进行了重命名,并引入了新的组合式 API,如setup()函数。原创 2024-01-12 11:31:06 · 421 阅读 · 0 评论 -
解决Vue.js Devtools未检测到Vue实例的问题
在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具。它能帮助开发者实时查看并操作Vue组件的状态、数据和方法等信息。然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用。本文将详细解析这个问题,并提供相应的解决步骤与代码示例。在检查Vue.js是否已正确加载时,我们需要确保Vue库已经被正确引入并可供项目中的JavaScript代码使用。原创 2024-01-09 09:44:36 · 2611 阅读 · 0 评论 -
如何从 Vue CLI 迁移到 Vite
当然,你通常不会从一个全新的 Vue CLI 项目开始,但其中许多步骤对于你建立的项目是相同的。这是通过添加到 中的配置选项来实现的。此外,由于我们正在迁移 Vue 2 项目,除了官方的 Vue 插件之外,我们还需要包含社区维护的 Vue 2 插件。与 Vue CLI 相反,Vite 实际上将保存 Vue.js 应用程序的索引.html文件放在项目的根目录中而不是公共目录中,因此您需要移动它。随着项目的增长,Vue CLI 版本只会逐渐变慢,而 Vite 承诺无论您的项目规模如何,都能以相同的水平执行。原创 2023-03-19 16:49:06 · 1914 阅读 · 0 评论 -
CSS模块postcss-modules,在jsx中实现vue里的scoped
postcss-modules是一个PostCSS插件,实现了css的模块化的概念,可以单独引用,每一个引用都是一个副本或着说是一个实例,自己带着唯一标识。任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。vue中有scoped可以给组件添加一个data-v-id的attribute,那在jsx中如何处理?构建工具会将类名编译成一个哈希字符串,防止整个项目的类名重复。我们自己把组件中的样式命名的全局唯一。),你还可以使用按名导入。原创 2023-03-18 23:39:25 · 1051 阅读 · 0 评论 -
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件原创 2022-07-28 20:03:51 · 14762 阅读 · 1 评论 -
如何给页面元素添加水印背景,在vue中怎么处理?
这里写一个简单的给页面元素添加水印背景的方法,主要是添加文字行的。这里我写的注释很详细了,不会的可以看看canvas的相关api。步骤2如果是在普通的项目里,直接调用上面的方法就可以实现简单的水印背景效果了。这里重点说一下在vue中,使用自定义指令的方式:为什么使用自定义指令?主要因为自定义指令里面带有el这个页面元素参数,所以说自定义指令主要就是用来干这个活儿的。步骤3:应用自定义指令自行改造,传入更多的参数,或者改变传入参数的方式都行!您的三连支持是我......原创 2022-07-01 11:09:42 · 2454 阅读 · 16 评论 -
在VUE3的setup函数中如何引用($ref)Html页面元素
如何在vue3中,在setup函数中使用ref来引用页面元素原创 2022-06-27 15:44:37 · 3708 阅读 · 2 评论 -
vue中缓存页面数据(刷新不丢失)
在vue中,实现缓存页面数据,并且刷新不丢失原创 2022-05-24 14:55:03 · 6868 阅读 · 0 评论 -
vue中组件保活<keep-alive>的使用
vue组件缓存技术,router-view,keep-alive的使用原创 2022-04-28 18:07:36 · 2073 阅读 · 2 评论 -
vue3中使用jsx报错React is not defined和h is not defined
js项目中jsx的使用js项目引入Vue 3 Babel JSX 插件修改vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vuejsx from "@vue/babel-plugin-jsx"import path from "path"// https://vitejs.dev/config/export default defineConfig({原创 2022-04-13 10:52:56 · 8908 阅读 · 4 评论 -
教你用vue自定义指令做一个组件的遮罩层loading效果
时间有限,不上图了。<div class="w-box-connent" v-whr-loading="isloading"></div>大概意思就是,有一个div,当isloading==true时候我要给这个div上面蒙上一层遮罩层。Vue.directive('whr-loading', { bind(el, bindingvnode, vnode) { let divzhezhao = document.createElemen原创 2021-09-24 09:24:22 · 3469 阅读 · 0 评论 -
vue3注册添加全局实例属性的方法,如何在setup函数中调用
1.第一种方式:上面是官方给得说明下面是我的具体用法:在vue3中注册一个全局实例方法在vue实例的setup()函数中没有this对象,如何调用实例方法$translate呢:哦了2.第二种方式:通过provide注入与在 2.x 根实例中使用 provide 选项类似,Vue 3 应用实例也提供了可被应用内任意组件注入的依赖项:使用 provide 在编写插件时非常有用,可以替代 globalProperties。在应用之间共享配置上面也是官方推荐得方式,但是他举得这个例子有点瞎b。具体用原创 2021-07-09 14:46:02 · 6997 阅读 · 0 评论 -
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
接上文把之前写的代码抽离成组件<!--whr-panel-c1 2021/4/15 @王浩然QQ378237242--><template> <div class="panel-hezi" ref="panelhezi"> <div class="panel-hezi-background"></div> <!-- <svg class="svg-head" preserveAspectRatio="原创 2021-04-20 16:20:50 · 4813 阅读 · 2 评论 -
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
一、从网上找一个喜欢的图1.首先大屏要先解决屏幕适配的问题:这里用viewport的方案,使用postcss-px-to-viewport插件,在vue项目里新建postcss.config.js配置一下postcss-px-to-viewport:module.exports = { plugins: { // ... 'postcss-px-to-viewport': { viewportWidth: 1920,原创 2021-04-14 17:12:57 · 15317 阅读 · 1 评论 -
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
管理系统中最长用的就是table表格了,elementui的table组件也是非常优秀,就是分页要单独写,十分不爽,现在把他俩封道一起便于使用。一、模版部分:当窗口大小发生变化时,表格的高度也发生变化,让内容始终充满全屏,这个是我自己的喜好 :height=“screen.height - tableHeightY” 组件el-table上的这个属性就代表这个意思。v-loading=“loading” 表示当数据变化时,出现loading效果。<template> <d原创 2021-04-09 17:05:19 · 3523 阅读 · 1 评论 -
用Vue写一个简单好看的菜单组件(Vue实战系列)
一、设计一下这个菜单1.实现一个左边栏菜单,菜单只包括两层;2.点击出现水波纹效果;3.激活效果呢,有一个绿球小点,标识激活的菜单,顶层菜单被激活时左边出现浅色激活标志;二、实现没人看就先不写了...原创 2021-04-08 14:54:00 · 5328 阅读 · 3 评论 -
正确开启vue3.0调试工具vue-devtools
正确开启vue3.0调试工具vue-devtools 1.去https://github.com/vuejs/vue-devtools官网下载,注意下载beta版本的,这个才是vue3.0用的2.如果是用火狐浏览器,点击beta应该是直接进入火狐的插件中心,直接安装就行了。如果安装谷歌版的,下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件,6.0.0.7是我下载时候的最新版本号,下载好以后解压,进去npm install一下。然后就安装一下就o了。我火狐和谷歌都安原创 2021-03-12 17:19:18 · 7718 阅读 · 7 评论