vue专题
vue, 左右布局宽，可拖动改变
1：建立一个draggableMixin.js 混入的方式使用 2：代码如下draggableMixin.js export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
vue项目集成CanvasEditor实现Word在线编辑器
CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
基于Springboot + vue 的抗疫物质管理系统的设计与实现
目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现 💬 系统登录注册 系统登录 登录界面 用户添加 💬 抗疫列表展示模块 区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
vue+el国际化-东抄西鉴组合拳
vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充，比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess
vue同页面多路由懒加载-及可能存在问题的解决方式
先上图，再解释 图一是多路由页面，图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应，并且图二的路由层在跟图一对应的页面中要加上components层，多一个s结尾，里面的的方法名就是图一路由的name值，里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在
vue+elementUI下拉框联动显示
<el-row><el-col :span="12"><el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"><el-select v-model="detailForm.partyAccountId" filterable placeholder="
vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决
解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时，抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so，找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e
vue子路由回退后刷新页面方式
最近碰到一个小问题，页面中含有 <transition name="router-slid" mode="out-in"><router-view></router-view></transition> 作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路由历史返回方式原本父页面想更新数据在created 跟mounted
vue+elementui--$message提示框被dialog遮罩层挡住问题解决
最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，现在就是要解决这个问题。 由于都是弹框，问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。 不过好在message组件中提供了customClass 属性，我们可以利用
vue3项目将所有访问后端springboot的接口统一管理带跨域
vue3项目将所有访问后端springboot的接口统一管理带跨域 一、前言1.安装Axios2.创建Axios实例3.创建API服务文件4.在组件中使用API服务 二、跨域三、总结 一、前言 在Vue 3项目中，统一管理所有访问后端Spring Boot接口的最佳实践是创建一个专门的API服务层。这可以让你的代码更加模块化、可维护和集中管理。你可以使用Axios库作为HTT
vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题
文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表
局域网内vue2 配置本地IP地址访问项目
在日常开发中同事可能需要访问你的前端项目，可以通过配置实现通过ip访问 一.首先找到config文件夹目录下的 index.js文件 将此处的host的值修改为0.0.0.0(即 host: 0.0.0.0) // Various Dev Server settings//host: 'localhost' //将localhost进行替换成 0.0.0.0host:
手把手教你入门vue+springboot开发（五）--docker部署
文章目录 前言一、前端打包二、后端打包三、docker运行总结 前言 前面我们重点介绍了vue+springboot前后端分离开发的过程，本篇我们结合docker容器来研究一下打包部署过程。 一、前端打包 在VSCode的命令行中输入npm run build可以打包前端代码，出现下图提示表示打包完成。 打包成功后会在前端工程目录生成dist目录，如下图所示： 把
vue中provide和inject的使用
vue中组件传值是比较常见的，也是我们日常编写代码最常用到的，这里主要讲讲provide和inject的用法。 示例： 祖组件 <template><DemoOne></DemoOne></template><script setup>import DemoOne from './DemoOne.vue' import { provide } from 'vue'provi
SpringBoot2+Vue3开发博客管理系统
项目介绍 博客管理系统，可以帮助使用者管理自己的经验文章、学习心得、知识文章、技术文章，以及对文章进行分类，打标签等功能。便于日后的复习和回忆。 架构介绍 博客管理系统采用前后端分离模式进行开发。前端主要使用技术：Vue3+ElementPlus。后端主要使用技术：SpringBoot2+MyBatisPlus+MySQL8+Redis，使用Minio服务做文件存储。 代码结构 后端代码
Vue2配置前端代理
在8080向5000请求数据 cli+vue2 一、cli内配置前端代理 1、使用 发送请求时写8080 在配置文件中配置 vue.config.js 2、缺点 无法配置多个代理无法控制某个请求知否要代理 二、方式二 module.exports = {devServer: {proxy: {'/api1':{ //匹配所有以'/api1'开头的请求路径targe
在vue项目中集成cesium
首先创建一个新的vue项目 安装vite中cesium插件 https://github.com/nshen/vite-plugin-cesium 安装插件 npm i cesium vite-plugin-cesium vite -D 配置插件 注释原有样式 修改代码 效果
【若依前后端分离】前端vue页面查看服务器本地的PDF
后端实现： 使用FileSystemResource包装文件，以便Spring MVC可以处理该资源 创建HttpHeaders对象以设置响应头 设置Content-Disposition头，使得浏览器以内联方式显示PDF（即在浏览器中直接打开） 设置Content-Type为application/pdf，指示响应体是一个PDF文件 构建并返回带有指定头信息和PDF资源的ResponseE
Vue3的Teleport：Teleport是Vue3的一个新功能，它允许我们将子组件渲染到父组件以外的地方，这在处理模态框、弹出窗口等情况时非常有用
I. Teleport 的概述 Teleport 的定义： 在 Vue 3.0 中，Teleport 是一个新的内置组件，它允许我们将任何部分的渲染内容 Teleport（传送）到 Vue 应用范围之外的地方。 换句话说，你可以控制片段，让它们在 DOM 中的任何位置渲染，而不仅仅是在当前组件内部。 Teleport 的效用和应用场景： Teleport 的主要用途是处理在 UI
vue2和vue3数据代理的区别
前言： vue2 的双向数据绑定是利⽤ES5的⼀个 API ，Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。 vue3 中使⽤了 ES6的Proxy代理对象，通过 reactive() 函数给每⼀个对象都包⼀层Proxy，通过 Proxy监听属性的变化，从而实现对数据的代理操作。 一，Object.defineProperty( ) let
vscode用vue框架2，续写登陆页面逻辑，以及首页框架的搭建
目录 前言： 一、实现登录页信息验证逻辑 1.实现登录数据双向绑定 2.验证用户输入数据是否和默认数据相同 补充知识1： 知识点补充2： 二、首页和登录页之间的逻辑(1) 1. 修改路由，使得程序被访问先访问首页 知识点补充3： 三、搭建基本首页框架 （1）在element-plus官网上找到对应的结构， （2）解决！白色背景未填充完全， 四、首页和登录页之间的逻辑(
vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND
本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND 解决办法： 在webpack.prod.conf.js 中output添加参数publicPath:’./’ 在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘pro
vue-cil项目中使用外部js的3种方法
vue-cil项目中 1. 导入属性的方法 新建 ./api/api.js import Vue from 'vue';Vue.prototype.test=function () {alert(111)} 在main.js 中导入； import * as API from './api/api.js' 在任何一个.vue文件中都可以使用此属性.例如 在a.vue中 this.t
vue-cil 项目常用npm 命令行；
``` bash# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build 删除目录；npm install -g rimraf（如果还没安装rimraf，全局安装ri
vue+elementui搭建后台管理界面(5递归生成侧栏路由) vue定义定义多级路由菜单
有一个菜单树，顶层菜单下面有多个子菜单，子菜单下还有子菜单。。。 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 {path: '/',redirect: '/dashboard',name: 'Container',component: Container,children: [{path: 'dashboard', name: '首