前端 终端 实战vue
局部添加加载中效果loading （vue+elementUI）
产品需求：有时候我们不想为整个页面添加loading效果。只想给局部区域添加loading效果。（这效果就不揍产品了） 在一个表格数据加载时，因为需要连接其它东西，所以后台接口返回数据需要较长时间，因此添加局部Loading效果，增加用户体验度， 最开始使用下面代码，直接放到<el-table>中， ......
vscode中vue项目中修改.vue文件名后报错
报错误信息： Already included file name '.../xxx.vue' differs from file name '.../xxx.vue' only in casing. The file is in the program because: Imported via ......
如何搭建一个vue项目
(如何搭建一个vue项目) 一、nvm 安装与使用 1.1、nvm简介 nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs 1.2、nvm下载 ①github下载 https://github.com/ ......
Http协议和解析实战
一、浏览器的B-S架构和C-S架构 1、C-S架构：客户机-服务器，简单点就是需要下载的软件，相关资源（图片、视频等会比较流畅），但是也缺少通用性（各种手机兼容），系统维护性，升级需要重新设计和开发，增加了维护和管理的难度。 2、B-S架构：浏览器和服务器架构模式，WEB浏览器是客户端最主要的应用软 ......
Vue 报错-4058 ENOENT: no such file or directory的原因和解决办法
原因是我在上一级目录打开的cmd 然后npm run serve 需要进到app内run一下 ......
Django4全栈进阶之路24 项目实战（报修类型表）：CKEditor富文本
CKEditor是一个强大的富文本编辑器，可以用于在网站或应用程序中创建和编辑内容。以下是在安装和使用CKEditor的一般步骤： 安装CKEditor： 下载CKEditor：访问CKEditor官方网站（https://ckeditor.com/）并下载适用于您的项目的CKEditor版本。 解 ......
vue中使用wangEditor在设置工具栏的显隐
前段时间为了富文本在wangEditor和tinyMCE中犹豫，虽然最后选择用tinyMCE，但是wangEditor的文档也是去看了的。 wangEditor中文文档在这里。由于项目中需要的工具栏并不多，需要将部分工具栏隐藏，然后我将这两个富文本框的文档都看了一下。 这里主要说一下wangEdit ......
【Vue2.x源码系列08】Diff算法原理
vue2采用了头尾双指针的方法，每次比对时，优先进行头头、尾尾、头尾、尾头的比对尝试，如果都没有命中才会进行乱序比对。 ......
VUE- history模式发布项目部署
VUE- history模式发布项目部署 环境：vue项目 发布后，通过nginx部署到docker容器内。 如需要去掉路径中的 #/ 则需要使用history模式发布。 1. 修改路由的配置文件 const router = new Router({ base: process.env.BASE_ ......
Vue项目结构
1、node_module:依赖库2、public:静态资源3、src:组件源码 assets:资源(图片) components:存放公共组件的地方 App.vue:根组件 main.js:项目入口4、package-lock.json:依赖的详细信息5、package.json:包依赖文件 ......
vue2 + fabric.js 实现撤销、恢复效果
全部代码 <template> <div> <canvas id="canvas" width="400" height="400" style="border: 1px"></canvas> <button :disabled="!canUndo" @click="historyState(sta ......
Vue3.3 的新功能的一些体验
Vue3 在大版本 3.3 里面推出来了一些新功能（主要是语法糖），网上有各种文章，但是看起来似乎是一样的。 我觉得吧，有新特性了，不能光看，还要动手尝试一下。 DefineOptions 宏定义 先来一个简单的，以前我们有时候想设个name，有时候不想让组件自动继承属性，这时候需要单独设置一个sc ......
vue嵌套iframe踩坑
iframe修改src不触发刷新 在vue中通过v-bind绑定src <iframe sandbox="allow-same-origin allow-scripts allow-forms" ref="iframe_page" :src="pageSrc" style="display:bloc ......
vue父组件调用子组件的方法
父组件中写法： <div style="padding: 10px"> <columnTwo ref="child" style="height: 200px;" :columnDataName="columnDataName" :columnData="columnData"></columnTw ......
vue3项目国际化，你还不了解吗？
vue3使用的国际化库为：i18n 安装方式： npm install vue-i18n@next 安装完成后在src文件夹下新建lang文件夹 在lang文件夹下新建需要语言转换的文件夹，这里以中文zh和英文en举例，在这两个文件夹下新建需要转换的语言 在zh的index.ts中写好我们需要转换的 ......
从0到1搭建后台管理系统（Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router ）
参考有来：https://www.cnblogs.com/haoxianrui/p/17331952.html Node 16+ 版本大于16【问题一：目前我是14.18.2的版本npm是6.14.15版本，这就涉及到要切换node版本的问题，不然我安装了16我的vue2项目就启动不了了】 vsco ......
vue 父子组件生命周期执行顺序
挂载阶段执行顺序为：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段执行顺序为：父beforeUpdate -> 子b ......
vue3+element-plus Calendar 日历组件添加农历、节假日
创建一个vue文件 <script setup lang='ts'> import { ref } from "vue"; import calendar from "./lunarDay";//引入农历、节假日计算方法 defineOptions({ name:'CusCalendar' }) c ......
vue请求后端数据和跨域问题
最近遇到的一个问题 后端写好的接口，前端怎么获取数据 这是我后端的接口：GET 接口 这是我前端运行的项目地址： 简单使用： 咱门前端使用 颇受好评的 axios 来发起请求 这是它的官网：https://www.axios-http.cn/ 不过要在vue中使用它，就需要先安装 打开终端 输入一下 ......
vue8小时带刻度的时间轴，根据当前时间实时定位
效果图： 需求： 1 开始时间、结束时间可配置2 时差固定8小时3 根据当前时间初始化位置4 每隔5s刷新位置5 超过结束时间停止刷新 HTML: <div class="time-axis"> <div class="startTime">{{start_time}}</div> <div cla ......
vue3+ swiper8
swiper是一个非常好用的图片切换组件，但是vue3 + swiper8 版本的文档看上去会有点懵逼（一部分是因为版本太多了，一部分是因为很少用） 此处记录下我的使用方法： 安装： npm i swiper 按照官网来使用： html部分：（基本上常用的也就这些啦，在复杂的就真的要去啃书啦） <s ......
合格前端需了解的知识 --- HTTP系列之队头阻塞（阅读时常5分钟）
简单聊下前端日常接触的HTTP协议 前言 2020年已过半，近期为了准备面试，重新学习了HTTP的部分知识点，以下是我个人对HTTP协议发展的理解，通过近期学习整理的笔记。 HTTP是一个属于应用层的面向对象的协议，主要特点概括主要有5点： 1、无状态：协议对于事务处理无记忆能力，每次客户端发起请求 ......
RedHat Enterprise Linux 8.0终端命令界面字体放大缩小
一、打开RedHat的终端命令界面。 二、放大界面中字体，Ctrl + Shit + “+” 三、缩小界面中字体，Ctrl + “-” ......
vue实现下拉懒加载
<template> <div class="ele-body infinite-wrapper" style="height: calc(100vh - 235px); overflow: auto" > <div class="columns" v-loading="loading"> <div ......
Vue 前端开发团队风格指南（史上最全）
Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，本文根据项目实际情况整理了一份适用于团队开发的vue风格指南，供大家参考。 ......
某服务器网站重构实战
这是一次网站重构实战，脱敏后发一下水水 部署服务分析 通过分析数据盘的目录结构，发现与宝塔面板的目录结构高度相似 分析数据盘上次的挂载位置，发现挂载系统盘的/www目录下 进入数据盘的/server/panel目录下，发现BT-Panel、BT-Task、default.pl等关键特征文件，以此确定 ......
VUE ELEMENT-UI无法用右上角的“X”关闭，取消按钮可用
VUE ELEMENT-UI无法用右上角的“X”关闭，取消按钮可用 原因：清空方式有问题 我定义的要打开的表单： addElementForm: { title: "配置产品要素", dialogFormVisible: false, prod_name: [], prod_code: [], us ......
vue3拾遗（不定期更新）
props传参 会自动跳过key/ref/...等本身就有特殊意义的属性名 路由跳转 当路由到同一个路由组件时，会依次触发onBeforeUpdate、onUpdated生命周期钩子 ......
nginx部署vue项目显示空白页
报错提示: index-fbb90c85.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". ......