草庐IT

Vue-Instant

全部标签

vue3.0 + D3.js 实现拓扑绘图

 1.首先,在项目中安装D3.js和Vue3.0:npminstalld3@^7.0.0npminstallvue@^3.0.02.Vue组件中引入D3.jsimport*asd3from'd3';3. 在Vue组件中定义一个data对象,用于存储拓扑结构的节点和边:data(){return{nodes:[{id:1,name:'Node1'},{id:2,name:'Node2'},{id:3,name:'Node3'}],links:[{source:1,target:2},{source:1,target:3}]}}4. 在Vue组件的mounted生命周期中使用D3.js绘制拓扑结构

个人博客-SpringBoot+Vue3项目实战(2)- 使用Vite搭建Vue3项目并安装Element Plus

目录前言使用yarn新建vite项目1.打开命令行工具2.执行`yarncreatevite`3.指定项目名**banxia-blog-frontend**4.选择框架**Vue**,通过上下箭头选择,**使用空格确定**。5.选择**javascript**,空格确定6.项目创建完成7.使用vscode打开项目,并新建终端8.执行`yarn`,安装依赖9.执行`yarndev`,启动项目项目结构分析单页面应用index.htmlmain.js安装ElementPlus使用包管理器完整引入type="module"的作用🧨🧨🧨大家好,我是搞前端的半夏🧑,一个热爱写文的前端工程师💻.如果喜欢我的

vue2文件流下载成功后文件格式错误、打不开、内容缺失

这里写目录标题项目场景问题描述原因分析解决方案项目场景后端采用文件流的方式将文件信息发送给前端,前端需要接收相应的流信息做出对应的操作,如接收到图片、pdf将进行预览模式,将接收到压缩包形式的则进行文件下载。后端对相应的文件进行不同的传输方式进行传输,前端则需要接收相应的信息并进行操作。问题描述当收到图片、pdf则可以正常的进行操作,当接收到压缩包文件流时候可以正常下载,但是下载后,下载的文件损坏了。原因分析由于文件不同,所以接收方式也是有区别的,普通的图片、pdf可以采用日常的请求方式去请求,而压缩包的请求需要加上接收数据格式responseType:为blob,默认的responseTyp

vue 时间格式总结及转换

    vue框架中我们常常用el-date-picker标签来显示和选择时间,那么,常见的时间的格式包含年-月-日(yyyy-MM-dd)、年-月-日时-分-秒(yyyy-MM-ddHH-mm-ss)、标准时间格式以及时间戳。那么今天我们就来总结一下常用的获取方法和它们之间的转换方法。    一、获取当前时间。    先看效果:              Ⅰ. 格式:年-月-日时-分-秒(yyyy-MM-ddHH-mm-ss) vue时间格式常见应用 获取当前时间(格式:年月日时分秒):{{time}} exportdefault{ data(){ return{ time

学会在Vue项目中插入高德地图JS API与地图的相关设置,看这一篇就够了~(保姆级精简教学)

    高德地图API官网:高德开放平台|高德地图API。由于博主是基于前端Vue框架进行开发的,所以针对地图JavaScriptAPI 结合Vue展开介绍。目录一、案例效果二、开发准备1.注册高德开放平台账号2.创建应用添加key值三、项目中使用地图组件1.npm获取高德地图API2.页面中使用地图API(案例)3.完整代码+详细注释四、在地图中添加覆盖物、图层、插件、事件等属性1.添加图层2.在地图中使用插件(地图控件)3.其他设置一、案例效果二、开发准备        需要注意想要使用JSAPI必须注册账号并获取key值。1.注册高德开放平台账号    正常输入个人信息注册即可。2.创建

Vue专题(三)vue项目启动端口更改

1.Vue项目的默认端口是8080,不修改的情况下启动项目之后端口就是8080,若8080端口已经被占用了,端口号会进行递增 2.在config文件夹下的index.js文件中可以进行配置更改port的值,重新运行项目即可 

vue3+mapboxgl鼠标浮动显示cgcs2000

一、需求鼠标在地图中浮动展示地图的经纬度,cgcs2000xy还有显示带号二、实现效果展示经度,纬度,x值,y值显示的是带号和y值三、思路3.1、mapbox获取经纬度方法初始化地图后.on方法中有个mousemove方法mapboxUtil._mapInstance.on('mousemove',mapboxUtil.mouseMove);mouseMove(e){console.log(e,"eeeeeeee")letobj=e.lngLatletWebMercator=wgs84ToCgcs2000(e.lngLat)obj["cgcsY"]=WebMercator[0]obj["cgc

【直接收藏】前端 VUE 高阶面试题(三)

86.说说vue生命周期,发送请求在生命周期的哪个阶段,为什么不可以是beforeMount,mounted中回答:1、vue的生命周期1)、生命周期是什么?Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等一系列过程,我们称这是Vue的生命周期。2)、各个生命周期阶段及其钩子函数vue的生命周期核心经历了四个阶段,在四个阶段的前后分别有两个钩子函数。第一阶段:数据挂载阶段:把配置项data中的属性,赋给了vue对象本身,并做了数据劫持。该阶段前后的两个钩子函数:beforeCreate和created第二阶段:模板渲染阶段:把vu

Java智慧工地系统源码(微服务+Java+Springcloud+Vue+MySQL)

智慧工地系统是依托物联网、互联网、AI、可视化建立的大数据管理平台,是一种全新的管理模式,能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。围绕施工现场管理的人、机、料、法、环五大维度,以及施工过程管理的进度、质量、安全三大体系为基础应用,实现全面高效的工程管理需求,满足工地多角色、多视角的有效监管,实现工程建设管理的降本增效,为监管平台提供数据支撑。一、智慧工地系统特点1.系统采用微服务架构;2.支持多端展示:PC端,平板、手机APP端;3.数字孪生可视化智慧大屏,一张图掌握项目整体情况;4.依托数据交互子平台,形成用户多系统间数据融合;5.IOT云平台,实现IOT设备对接及数据传输与

Vue3 + Element Plus 实现动态标签页及右键菜单

目录先上图 使用el-dropdown绑定右键菜单,为每个tab页绑定一个右键右键菜单生效后控制每个下拉项的禁用与显示(每一项代表一个功能)每个右键项对应的功能 控制每次只显示一个右键完整代码先上图        只有首页的情况        多个tab页的情况 使用el-dropdown绑定右键菜单,为每个tab页绑定一个右键{{item.name}}重新刷新关闭当前1"@click="closeOther(item)":disabled="handDisabled('closeOther',item,index)">关闭其他1"@click="closeAll(item)":disable