前端 终端 实战vue

Vue3内置组件suspense用法

## 1、作用 在使用异步组件时,由于需要等待组件加载完成后才能显示,因此可能会出现页面空白或显示错误信息的情况。而 Suspense组件的作用就是在异步组件加载完成前显示一个占位符,提高用户体验。 ## 2、用法 * 首先子组件AsyncShow:使用了promise包裹代码 ```javascr ......
组件 suspense Vue3 Vue

vue监听对象属性值发生变化

监听对象属性object里面属性值的变化。 export default { data() { return { object: { username: '', password: '' } } } } 方法一:直接根据watch来监听。 export default { data() { retu ......
属性 对象 vue

[转]vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什么?

原文地址: vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什么? - 掘金 vue中的css深度选择器 概念与作用 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,父组件的样式将不会 ......
deep gt inner-selector 深度 selector

【校招VIP】前端校招考点之页面转换算法

考点介绍: 在地址映射过程中,若在页面中发现所要访问的页面不在内存中,则产生缺页中断。当发生缺页中断时,如果操作系统内存中没有空闲页面,则操作系统必须在内存选择一个页面将其移出内存,以便为即将调入的页面让出空间。而用来选择淘汰哪一页的规则叫做页面置换算法。 一、考点题目 1、下述()页面淘汰算法会产 ......
前端 算法 页面 VIP

vue~layout模板页的使用

# 模板页的重要性 Vue 项目中使用布局组件来创建页面布局的方式是完全可行的,而且在很多项目中都被广泛采用,包括像 ruoyi 这样的框架。这种模式有助于实现统一的页面布局结构,减少重复代码,并提高代码的可维护性。 让我们具体分析一下你提到的 ruoyi 框架的做法: 1. **Layout 组件 ......
模板 layout vue

移动前端不得不了解的html5 head 头标签

本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签。 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签显得非常重要。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面 ......
前端 标签 html5 html head

导入导出(Excel)vue

导入导出(Excel) 首先 vue安装插件 (最后有完整代码) npm install xlsx file-saver 其次: 简单的导出按钮 代码: <template> <div> <el-button type="primary" @click="exportExcel">导出 Excel< ......
Excel vue

用AR和VR改变网页体验 - 前端黑科技大揭秘

随着科技的不断发展,前端技术也在不断演进。近年来,增强现实(AR)和虚拟现实(VR)技术的崛起,为网页体验带来了全新的可能性。本文将探讨如何利用AR和VR技术来改变网页体验,为读者带来前所未有的视觉和交互体验。 ## AR技术在网页中的应用 AR技术通过将虚拟元素叠加在现实世界中,为用户创造出全新的 ......
前端 网页 科技

vue3 报错 and 'localEnabled' does not exist in type 'ViteMockOptions'

报错:ReferenceError: require is not defined 原因: 通过命令行 pnpm install -D vite-plugin-mock mockjs 安装得vite-plugin-mock 之后发现再vite.config.ts里边报错 vue3+vite安装vit ......
39 ViteMockOptions localEnabled exist vue3

使用 docker 打包构建部署 Vue 项目,一劳永逸解决node-sass安装问题

> 文章源于 Jenkins 构建 Vue 项目失败,然后就把 node_modules 删了重新构建发现 node-sass 安装不上了,折腾一天终于可以稳定构建了。 > 犹记得从学 node 的第一天,就被 node-sass 折磨了一整天,后面本地没问题了然后服务器开始折磨了,这次又遇到,尝试 ......
一劳永逸 node-sass 项目 docker 问题

abp-vnext-pro 实战(九,前端vue和vben学习)

vben效果 Vben Admin (vvbin.cn) 对应的代码在 vue-vben-admin/src/views/demo/page/form/basic/data.ts at main · vbenjs/vue-vben-admin (github.com) { field: 'time' ......
前端 abp-vnext-pro 实战 vnext vben

vue2的源码github下载和本地启动调试源码

1.下载源码:https://github.com/vuejs/vue 2.安装依赖,命令行执行:yarn 3.修改package.json的运行脚本scripts里面加上源码map定位的参数,在打包后页面引入使用时可以调试到源码: { "name": "vue", 。。。 "scripts": { ......
源码 github vue2 vue

前端工程化实践 All In One

前端工程化实践 All In One 提高效率, 保证质量,降低成本,产生价值 前端工程化是什么 把软件工程的最佳实践应用到大型前端项目上,对大型前端项目进行工程化的开发和管理. 前端工程化本质 减少不必要的重复劳动,提高开发效率,保证代码库质量,降低后期迭代、维护的风险和成本,为公司和个人带来真正... ......
前端 工程 All One In

Vue动态创建组件实例并挂载到body

方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (V ......
组件 实例 动态 body Vue

VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)

准备工作:安装 yarn install vue-quill-editor main.js // 编辑器 import VueQuillEditor from 'vue-quill-editor' // 引入样式 import 'quill/dist/quill.core.css' import ' ......
文本 编辑器 elementUI 图片 quill

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

### 一、问题描述: - 学习vue3.0( Vue.js - 渐进式 JavaScript 框架 | Vue.js)的时候一直使用的家里电脑,项目搭建运行一直没问题,公司近期用vue3.0写项目 - npm init vue@latest —> npm install 都ok,npm run d ......
Cannot module vue3 find node

前端项目报EISDIR: illegal operation on a directory, read这个错误

背景: 我用webstorm开发前端页面时,项目用Vue3来开发,出现如下报错。 ![image-20230824171957615](https://img2023.cnblogs.com/blog/2355908/202308/2355908-20230824173234954-82254241 ......
前端 directory operation 错误 illegal

vue实现大文件上传下载

​ 以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载。 准备文件上传的API #region 文件上传 可以带参数 [HttpPost("upload")] public JsonResult upl ......
上传下载 文件 vue

Vue入门

属性动态绑定,内容插值语法 VScode-Vue插件 live server 插件,模拟服务器启动开发前端代码 Vue 3 Snippets 代码提示插件 Volar Vue的开发提示插件 其他插件 bootcdn 搜索js插件类库 Draw.io Integration vscode流程图插件 v ......
Vue

vue中,一个参数是一个图片网络地址,当重新上传一个图片替换原来的图片后,地址没变,但是图片还是原来的

这个问题可能是由于浏览器缓存导致的。为了解决这个问题,你可以向图片的URL地址中添加一个随机参数,以确保每次加载图片时都会从服务器获取最新的图片。你可以使用类似于以下方式来添加随机参数: <img :src="imageUrl + '?timestamp=' + Date.now()" /> 这样, ......
图片 地址 参数 还是 网络

Visual Studio Code 修改终端执行python脚本路径的办法

正常安装完VS Code执行python都是默认在python的安装目录。 修改terminal执行的路径在当前文件夹路径; 搜索 python.terminal.executeInFileDir 勾选即可。 ......
脚本 路径 终端 办法 Visual

Vue组件缓存之keep-alive正确使用姿势

先来看一个项目中的需求 作为苦逼的前端开发者,我们无时无刻都要面对产品经理提的各种需求, 比如下图这个场景 场景: 从首页的点击导航进入列表页, 列表页点击列表进入 该 数据详情页 从详情页返回,希望列表页缓存,不重新渲染数据,这样会提高用户体验。 分析一下 这样需求,如果是小程序的话,默认列表页就 ......
缓存 keep-alive 组件 姿势 alive

vue3 配置commitlint 实现上传时,对代码描述的约束

1、对于我们的commit信息,也是有统一规范的,不能随便写,要让每个人都按照统一的标准来执行,我们可以利用**commitlint**来实现。 安装包命令: pnpm add @commitlint/config-conventional @commitlint/cli -D 2、添加配置文件,新 ......
commitlint 代码 vue3 vue

vue3 使用 setup 语法糖时,keep-alive 缓存使用 include / exclude 获取组件名

``` ``` `vue3` 使用 `keep-alive` 缓存页面时,如果需要使用 `include / exclude` 参数,那么就要用到组件名称。如果用 `setup` 语法糖书写时无法直接获取组件名,此时想要设置组件 `name` 的话有如下方法: #### 1. 多写一个script标 ......
缓存 语法 keep-alive 组件 include

Vue【原创】数据可视化,复合数字形式展示

做数据可视化的时候,经常碰到需要很灵活的数字形式展示。 先上个效果图: 如图包括名称,数量,别名,单位,上升下降,环比等等的复合数据展示,并且需要支持样式灵活配置。 此组件包括2个模块,父容器组件box-group,其中每一项的子组件box。 父组件 box-group 1 <template> 2 ......
形式 数字 数据 Vue

vue3 报错:husky - pre-commit hook exited with code 1 (error)

问题:git 提交不上去 解决方法: "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"", ......
pre-commit commit exited husky error

Vue中使用vue-drag-resize实现窗体可拖拽和随意缩放大小

场景 若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面的基础上,实现弹窗窗体可移动以及随意缩放大小。 效果如下 注: 博客: https://blog.c ......
窗体 vue-drag-resize 大小 resize drag

vue-manager-system前端开发使用

github地址,感谢作者xzfxz开源 https://github.com/xzfxz/vue-manager-system 1. cnpm install 2. cnpm run dev 3. cnpm run build ......
vue-manager-system 前端 manager system vue

vue获取当前时间的前一小时时间戳

参考:https://www.5axxw.com/questions/simple/47vt8l ......
时间 小时 vue

umi-qiankun——子应用vue+element返回主项目react+antdReact,样式丢失问题

参考: [Bug]结合 styled components 使用时 dynamicHeadAppend 存在缺陷 #617 https://github.com/umijs/qiankun/issues/617 qiankun官网 https://qiankun.umijs.org/zh/api/# ......
umi-qiankun 样式 antdReact qiankun element