随笔分类 - Vue
你懂得越多，你不懂的就越多
摘要：vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览 问题 为什么突然写这么一篇文章，首先，自己用vite+vue写了点静态页面，需要给客户看页面效果，但是我打包之后将 dist 发送给客户后，客户没有通过nginx等三方服务部署，直接打开html文件页面是空白的。
阅读全文
摘要：Vue 前端封装组件基础知识点 该文档仅供参考，具体封装方式根据项目需求和团队规范进行调整。 一、封装组件的目的 在 Vue 开发中，封装组件是核心思想之一，其目的和意义主要体现在以下几个方面： 核心目的 说明 示例场景 代码复用，减少冗余 将重复出现的 UI / 逻辑抽离为组件，避免 “复制粘贴”
阅读全文
摘要：vue实现拖拉拽效果，类似于禅道首页可拖拽排布展示内容（插件-Grid Layout） 这个是类似与禅道那种首页有多个指标模块，允许用户自己拼装内容的那种感觉。 实现效果 插件资料 vue3版本 如果项目是vue3 的话使用的是 Grid Layout Plus。 官网：https://grid-l
阅读全文
摘要：JS获取用户访问网页的浏览器、IP、地址等信息 实现访问统计 要做一个网站统计功能，需要获取用户访问的浏览器类型、版本、用户访问的IP地址、用户的所在城市、访问时间、访问路径。 因为我们这个只需要统计访问的那个页面就可以，不需要记录具体点击了那些功能，所以就只需要想办法获取用户访问的浏览器类型、版本
阅读全文
摘要：vue3 实现web网页不同分辨率适配 首先这个标题可能不是特别的合适，之前开发了一个网站，那个网站是类似于官网的效果，按照 19201080100% 的分辨率进行开发的，但是在开发完成之后，发现有的电脑是 19201080125% 的大小展示的，这样的话，有些地方可能展示就会出一些问题。当然了可以
阅读全文
摘要：前端开发规范基础汇总 命名规范 常用的命名规范 camelCase（小驼峰式命名法 —— 首字小写） PascalCase（大驼峰式命名法 —— 首字大写） snake_case（下划线命名法） kebab-case（短横线命名法） 项目文件命名 项目命名 全部采用小写方式，以短横线分隔。例：my-
阅读全文
摘要：vue 实现关键字高亮效果 这是啥子意思呢，就是类似于百度搜索，根据关键词搜索结果，搜索结果中，与关键词相同的字显示红色，仅此而已，没有什么大的功能。简单写一下demo。 环境 我使用的是 vue3 + ts 的语法来写，其实一个样儿，关键代码 js、ts 都可以，就一个方法，调用一下就可以了。 <
阅读全文
摘要：vue 使用代码编辑器插件 vue-codemirror 之前用过一次，当时用的一知半解的，所以也没有成文，前几天又因为项目有需求，所以说有用了一次，当然，依旧是一知半解，但是还是稍微写一下子吧！万一以后用到，不用满网找资料了，个人学习记录，仅供参考，切勿尽信！ vue-codemirror 说明
阅读全文
摘要：vue 预览 pdf、word、excel 这是之前做项目的时候涉及到的一个功能，当时做了之后就一直没有整理，其实也很简单，功能不多，只是预览，没有在线编辑的功能，所以呢，啊哈哈哈哈哈，一个插件就可以了。 预览 pdf 预览 pdf 我是用的这个插件，直接运行一下命令就可以了： npm instal
阅读全文
摘要：cesium 截取图片 没啥好说的，直接贴代码吧 toImg() { if (viewer) { viewer.scene.render(); let canvas = viewer.scene.canvas; let image = canvas.toDataURL("image/png").re
阅读全文
摘要：openlayers 截图 OK，我承认，这篇博文是一个水文。 最新做了一个功能，就是 openlayers 展示二维 GIS 数据后，可以把当前的视角导出图片。 直接写代码吧，没啥好说的： // 截图 toImg() { if (this.map) { let canvas = this.map.
阅读全文
摘要：vue 使用 html2canvas 截取图片保存 好久没有写博文了，写够了，没啥想写的了，这个号算是废了，哎，气人啊！越来越胖，越来越懒了。 html2canvas 简介 html2canvas是一个JavaScript库，它可以将HTML元素转换为Canvas元素。具体来说，它可以将整个页面或特
阅读全文
摘要：vue 使用 threejs 实现实景看房效果 demo 关于这个 threejs 实现 VR 看房效果也超级简单，只需要提供一个思路的话就可以了其实，首先需要一个房间结构的贴图，这个贴图网上有，当然找个合适的也不好找，我找了一上午在别人的 demo 里面扣了一张出来，代码都是一样的，稍微说一下思路
阅读全文
摘要：vue 使用 threejs 加载第三方模型 接专栏的上一篇博文，这是加载第三方模型相关的。这篇博文拖了很久了哈，简单说一下吧，本来不想写了的，觉得相对来说比较简单，但是还是稍微一扯。为啥要加载第三方呢，上一篇我们绘制的小立方体很简单啊，但是有一些模型可能比较复杂，比如一辆小汽车，一个大楼，我们用代
阅读全文
摘要：vue2 使用 cesium 【第二篇-相机视角移动+添加模型】 搞了一阵子 cesium，小白入门，这东西很牛逼，但是感觉这东西好费劲啊！网上资料不多，每个人的用法又不一样，操作起来真的是绝绝子。之前写了一篇 vue2 使用 cesium 的博文，没有写完，本来想继续写来着，想了一下还是重新开一篇
阅读全文
摘要：vue2 使用 cesium 篇【第一篇】 今天好好写一篇哈，之前写的半死不活的。首先说明：这篇博文是我边做边写的，小白也是，实现效果会同时发布截图，如果没有实现也会说明，仅仅作为技术积累，选择性分享，不做教学哈。不好别喷。 安装 cesium 这个就很简单，只需要一句简简单单的命令就可以实现在 v
阅读全文
摘要：vue 实现通过字符串关键字符动态渲染 input 输入框 今天做一个简单的demo，就是有一个字符串，字符串里面有标识符，前端检测到标识符之后，需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能。 问题描述 就比如现在有这样一个字符串： 你好，我是{name}，我今年{age
阅读全文
摘要：vue 实现文件切上传 在实际开发项目过程中有时候需要上传比较大的文件，然后呢，上传的时候相对来说就会慢一些，so，后台可能会要求前端进行文件切片上传，很简单哈，就是把比如说1个G的文件流切割成若干个小的文件流，然后分别请求接口传递这个小的文件流。 流程简说 实现文件切片导入，首先我们使用 elem
阅读全文
摘要：openlayers实现热力图效果 这个在之前的博客里面分享过了，再稍微说一下。 先说效果，最终实现的效果就是下面这个样子的，如果需要的话就接着看，如果不是这个样子就不要看了。 使用 vue 项目导入 openlayers 这个就不说了，如果需要的话去看之前的博客。 使用热力图其实和添加点是一样的，
阅读全文
摘要：vue 中国省市区级联数据下拉工具 最近vue玩的时候需要有一个全国省市区县的下拉工具选择地区，并且需要获取地市的行政编码。找了一个比较好用的插件，稍微分享一下。 element-china-area-data 这是一个中国省市区连级数据下拉工具，可以获取行政区编码，也可以获取省市区的名称，具体的效
阅读全文
浙公网安备 33010602011771号