布局vue web
VUE 3.0使用Tinymce编辑器
本人使用的IDEA开发工具 参考文档： 1.官方文档2.中文文档 一、使用npm安装Tinymce。我这里是指定了版本号的 npm install tinymce@6.0.0 npm install @tinymce/tinymce-vue@5.1.0 二、修改路径，加汉化 1、将下载好的tinym ......
【vue2】实现数字纵向滚动效果（计时器效果）
需求： 在页面中显示一个数字，并在进入视口时显示计时器滚动效果： 效果如上 ↑ 新建组件ScrollNumber.vue： <template> <div style=" display: inline-flex; justify-content: flex-start; align-items: ......
如何用Vue实现模块化开发？
模块化开发就像我们管理书籍一样，一开始只有几本书时，堆书桌上就可以了。随着书越来越多，有几十上百本时，我们需要一个书橱，按照类别放在不同的格子里。对比App迭代过程，起步时，业务少，单一工程模式效率最高，随着业务发展，我们要根据业务拆分不同的模块。所有这些目的都是为了方便管理、高效查找。 模块化，就 ......
vue3 模糊搜索 不区分大小写 多选框 element plus
```javascript<div class="select-part" ref="selectRef"> <div class="check-type"> <input type="text" class="check-type-title" :placeholder="placeholder" ......
Vue3 面试题 （2023-09-26更新）
Vue3 对比 Vue2 做了那些改进？ 1. 响应式系统 vue2 中使用的 Object.defineProperty 实现的响应式，劫持整个对象，递归遍历所有属性，给每个属性添加 getter 和 setter vue3 中使用的 Proxy 实现的响应式 2. 编译阶段 Fragment V ......
Vue3-vite 按需引入Element-plus
1.下载unplugin-vue-components，unplugin-auto-import 包 npm i -D unplugin-vue-components unplugin-auto-import 2.vite.config.js 文件中配置 1 import AutoImport fr ......
elementUI <el-col>布局错乱
只需要在<el-row>中添加type类型flex，再设置flex-wrap:wrap即可 <el-row type="flex" style="flex-wrap: wrap"> ......
vue npm 视频播放 项目中感觉比较好用的包
npm @easydarwin/easyplayer 对H265 H264支持都比较友好！！实测比较好用 <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c ......
vue中没有index.html 如何可以加上
在Vue项目中，如果没有默认的index.html文件，你可以手动创建一个并进行设置。 以下是创建并配置index.html的步骤： 在你的Vue项目根目录下创建一个新的public文件夹（如果还没有）。 在public文件夹下创建一个新的index.html文件。 在index.html文件中添加 ......
vue-cli_关于vue-cli打包后多出的js与css文件
平常并没有注意到打包后js与css有多少个文件, 一般而言执行打包命令后就差不多万事大吉, 然后交给后端去完成部署就好了. 但轮到自己亲手为打包文件设置CDN时, 发现, 原来打包出来文件多少还是有区别的. 如下, 是我打包出来的某个项目的文件和自动生成的html文件的引入文件. ├─dist | ......
Web: HTTP基本知识
HTTP概念 超文本传输协议(HTTPHyperText Transfer Protocol)联网上应用最为广泛的一种网络协 议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。 HTTP协议和TCP/IP协议族内的其他众多的协议相同，用于客户端 ......
vue源码解析-实现一个基础的MVVM框架
基本介绍 vue.js采用数据劫持结合发布-订阅模式的方式，通过Object.defineProperty()来劫持各个属性的getter,setter,在数据变动时发布消息给订阅者，触发响应的监听回调。 主要功能： 实现一个指令解析器Compile 实现一个数据监听器Observer 实现一个Wa ......
Vue-进阶，404页面控制及路由钩子
路由转发传参 我们在使用vue-router时，可能会在Vue实例对象中，写一些方法使用路由的方式完成跳转，其实这种方式也是可以进行转发的 this.$router.push("/main"); 如上，可以使用字符串拼接，把参数拼接在后面，然后转发，完成参数传递 this.$router.push( ......
如何在vite+vue3中的html页面中使用变量？
如何在vite+vue3中的html页面中使用变量？ vite版本：4.1.5 vue版本：3.2.47 需要引入新的开发依赖: yarn add vite-plugin-html -D 修改vite.config.ts文件配置 ... // @ts-ignore import { createHt ......
使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
目录1、前言2、分析3、 实现4、踩坑4.1、拖拽辅助线的坑4.2、数据的坑4.3、限制拖拽4.4、样式调整 1、前言 最近在做一个文件夹管理的功能，要实现一个树状的文件夹面板。里面包含两种元素，文件夹以及文件。交互要求如下： 创建、删除，重命名文件夹和文件 可以拖拽，拖拽文件到文件夹中，或着拖拽文 ......
vue+el 实现 阶梯效果
[简介]： 关键代码; <el-row class='midPart' style=''>{{ menu.name }}</el-row>.midPart { float: left; width: 4%; padding: 7px 7px; background: #444;} [内容]： <te ......
网格布局自适应
需求 多个固定宽度的盒子横向排列，超过页面宽度自动换行。要求盒子间空隙自动计算，避免出现行末大幅空白现象。 分析 要求自适应，就不能给固定宽度的 margin； 针对不同屏幕宽度，每行的盒子数量也不同； 因此，需要用到 repeat() 使得列宽自适应。比如： .grid { display: gr ......
使用SpringBoot+Vue3的形式实现管理系统的添加功能
1、查看页面形式 2、使用element-plus组件为添加页面引入form表单 成功引入form表单组件： 3、更改成自己需要的形式 4、测试是否可以拿到文本框的数据 拿到数据啦！！（记得vue3这里： console.log(form) //不要写this ```） # 5、vue界面的添加代码 ......
vue 路由动画
安装 npm i -S animate.css main.ts 引入 import 'animate.css'; router const routes: RouteRecordRaw[] = [ { path: '/', alias: ['/login'], component: () => im ......
vue 暴露组件方法
loadingbar <template> <div class="wrapper"> <div ref="bar" class="bar"></div> </div> </template> <script setup lang="ts"> import { onMounted, ref } fr ......
vue安装路由
一、安装命令： npm install vue-router --save 或者 cnpm install vue-router --save 二、新建一个router.js router.js大致内容 1 import {createRouter, createWebHistory} from ' ......
08_Electron与vue环境搭建
首先在 Vscode 控制台输入：npm intall -g @vue/cli or yarn global add @vue/cli。 然后再输入 npm i -g @vue/cli-init，这时候输入 vue -V 来看 vue 是否安装成功。 安装成功后输入 vue init simulat ......
关于时间太长忘记vue如何启动的问题
1、开启SpringBootApplication项目 2、在vue项目的Teminal处，输入相关命令 vue2 npm run dev vue3 npm run serve 咳咳，写一遍我就不会忘记啦~ ......
转 五分钟了解互联网Web技术发展史
简介： 1994年，万维网联盟（W3C，World Wide Web Consortium）成立，超文本标记语言（HTML，Hyper Text Markup Language）正式确立为网页标准语言，我们的旅途从此开始。 本文将沿着时间线，从**发现问题-解决问题**的角度，带领大家了解 Web ......
flex布局
伸缩容器,伸缩项目 伸缩容器: 开启了display:flex; 的元素就是伸缩容器 伸缩项目: 伸缩容器的所有子元素自动成为伸缩项目 备注: ①仅伸缩容器的"子元素"是伸缩项目. 孙子重孙子等后代元素,不是伸缩项目. ②一旦成为了伸缩项目,全都会被块状化,无论原来是那种元素(块,行 ......
vue实现大文件切片上传、断点续传、并发数控制等
一、上传按钮和进度条等 <div> <h2>上传文件</h2> <div ref="drag" class="drag"> <input class="file" type="file" @change="handlerChange" /> </div> <el-progress style="wi ......
vue2兼容ie10
1.找到ie浏览器。可以下载，一般windows自带 2.启动项目，可能会出现再ie中输入本地地址后直接跳转到Microsoft Edge的情况，需要配置后正常使用ie10 配置过程：控制面板--网络和Internet--Internet选项--更改主页--高级--勾选跟Internet Explo ......
java web应用远程debug
java web应用远程debug 1、在启动参数中加入下面的参数 address对应的端口可以修改 -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=15555 2、添加远程服务 3、填充服务名（任意）、远程服务的ip ......
什么是 JSON Web Token
JSON Web Token（JWT），又称为JSON令牌，是一种用于在网络应用之间安全地传输信息的开放标准（RFC 7519）。它采用了一种紧凑的、自包含的方式来表示信息，通常用于身份验证和授权。JWT的设计目标是确保信息的完整性和安全性，同时具备易于使用和传输的特点。 JWT的结构 JWT由三个 ......
Vue-进阶：路由及elementUI组合开发
Vue-router路由 什么是vue-router？ 服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。 然而，在单页面应用中，客户端的 JavaScrip ......