xi1213-CSDN博客

2、将node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue中rect标签的:key="i"剪切到有v-for那一层的template中。3、将node_modules/@jiaminghi/data-view/lib/components/decoration6/src/main.vue中rect标签的:key="i"剪切到有v-for那一层的template中。现在重新运行项目看看，是不是不报错了？

2022-11-04 23:03:00 3847 3

原创 vue打包项目版本号自加

具体思路是：在执行打包命令npm run build时，同时执行一段js代码，该代码通过调用fs来自加修改package.json中的version，然后再进行打包操作。项目每次打包后都需要改动项目版本号，这个改动每次都需要在package.json中修改version，比较麻烦，到底有没有一种打包后版本号自加的办法。4、最后执行打包命令：npm run build便会发现package.json中的版本号变化了。版本号自加其实可以使用fs修改文件来实现的。

2022-09-21 14:10:36 2554

原创疫情可视化part1

至成都九月份以来疫情原因被封了一两周，居家着实无聊，每天都是盯着微信公众号发布的疫情数据看，那种页面，就我一个前端仔来说，看着是真的丑啊！(⊙_⊙)？既然丑，那就自己动手开整！项目是2022.9.5开始的，截止2022.9.12我完成了大概有八成。主要是想让数据更加直观，而且可离线下载(当然还有装逼！┑(￣Д ￣)┍)。我做这个其实还是学到了很多东西，主要是vue2与vue3的区别。以前的this算是可以彻底抛弃了，还有就是组合式api配合setup语法糖，爽啊！就连组件引入后都不用注册了，直接使用。

2022-09-13 16:29:17 5401 22

原创 vue中代理解决跨域

简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。target就是自己需要代理的真实地址getIpMsg你是可以自定义的。我是用vue开发的，就vue代理模式解决跨域说明一下。

2022-09-13 16:23:40 2046

原创 jsonp跨域

当然我这只是简单的原理说明，网上有很多封装好了的方法，甚至专门的插件都有，比如vue的：vue-jsonp。

2022-09-13 10:40:43 365

原创 vue+xlsx实现表格的导入导出

前端在开发过程中若是管理系统之类的业务系统，则大多都会涉及到表格的处理，其中最为常见的就是表格的导入导出。有很多办法都可以实现，其中最简单的还是使用插件xlsx。在导入时，需要注意在new FileReader()的加载事件中不使用箭头函数的话，this是不会生效的。...

2022-08-08 11:27:05 2335 1

原创 canvas实现图片标记

由于业务需求，需要有一个图片标记功能，其实就是对图片画框画线做标记，类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单，但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo，作为记录，同时你们在开发过程中有类似需求的话也可以参考一下该思路，其中有不足之处还请指出来。在开发过程中我还是踩了很多坑的，文章中记录的只是很少的一部分。还是建议看文章开头的项目源码链接，源码中我写了大量详细的注释。......

2022-08-07 13:52:43 3688 23

原创 three.js实现太阳系

刚开始使用three.js时会不太熟悉，想写一些项目增加理解，网上翻了好多文章，不是画立方体就是画三角形，最后偶然看到这个网站，十分炫酷。我们也许没那么牛逼，但我们可以整个简略版的太阳系来练练手，加强理解，增加熟练度。1、绘制宇宙背景。2、添加宇宙星辰。3、绘制行星轨道。4、绘制行星环。5、实现行星自转与公转。6、实现双击行星后镜头的拉近效果(类似cesium的flyTo效果)。7、显示行星描述。项目是以vue开发的浏览地址项目地址废话少说，我们直接开整！构造行星数据我将数据写

2022-07-18 23:50:11 2533 4

原创 electron-builder打包配置说明

发现问题通过vue建立的项目使用electron-builder打包出exe后发现名字就直接是项目文件夹的名字，但此时想自定义汉字名称，通过尝试直接修改package.json中的name后发现此法仅限于修改为英文名称，汉字会报错。尝试解决在网上查修后发现有人直接在package.json中添加build： "scripts": { // ... }, "build": { "productName": "xxx", "appId": "xxx", // ..

2022-04-04 15:11:56 5774 1

原创 vue打包后dist的使用

发现问题vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。分析问题经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。解决办法1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"2、删除之前的dist重新打包。结语再次打包后打开dist中的index.html，发现页面出来了，但是如果页面有路由跳转的话，会发现跳

2022-03-15 09:27:36 5453

原创解决使用filter: blur时图片四周泛白的问题

发现问题在使用filter: blur(15px)模糊背景图时，发现图片周围会泛白。解决问题查了好多办法：1、使用StackBlur.js处理图片模糊。2、改变background-size：cover为background-size:150% 150%。3、给body添加同样的背景图。4、直接使用transform: scale(1.2);。总结使用第四种办法最方便，不用引入其他包，不用再次引入图片。...

2022-03-07 23:33:23 1635

原创 electron修改vue项目打包后的exe图标

vue用electron打包点击这里安装electron-icon-builder添加图标生成器：npm i electron-icon-builder生成图标1、在package.json的scripts中添加一条命令并保存：“electron:generate-icons”: “electron-icon-builder --input=./public/icon.png --output=build --flatten”2、将你准备的图片命名为icon.png并复制到public目录下

2022-03-06 13:51:46 4672 4

原创 electron打包vue项目

创建项目点击这里添加electron-builder1、在项目目录下运行命令：vue add electron-builder2、electron-builder添加完成后会选择electron版本，直接选择最新版：electron下载失败vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron窗体运行1、下载完成后尝试运行electron窗体：npm run electron:serve2、窗体运行成功：打

2022-03-05 23:07:38 2907 1

原创 vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码，很多时候都需要将重复的部分写成一个组件，方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写，事件则会失效：正确写法应该是这样：...

2022-03-03 16:59:31 837

原创 three.js添加3d模型

three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c

2022-03-03 01:20:13 9143 18

原创随机读取数组中n个元素

需求随机不重复的显示一系列图片分析可使用Math.random()，其作用是返回介于 0（包含） ~ 1（不包含）之间的一个随机数。先获取到图片路径，将图片路径放入数组中，再随机从数组中读取n个元素放入新数组，页面只需遍历新数组生成img即可。实现<template> <div class="container"> <div class="container-div"> <img v-for="item in randomList

2022-03-02 20:11:10 417

原创 css实现瀑布流

jquery时代大多使用插件实现瀑布流布局，但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后，我们便可直接使用此属性来进行布局，其中column-count代表列数，column-gap代表列之间的距离。值得注意的是，当使用column-count时，容器中不只一个元素时，列末尾容器中一部分元素可能会断裂至另一列中，为防止此种情况发生可以使用break-inside: avoid，避免容器断裂成两部分。各大浏览器支持程度：实例： &l

2022-03-02 16:33:11 2137

原创 vue动态绑定样式

每次点击方块时通过三元表达式，改变对应的class，每一个不同的class对应不同的样式，从而通过改变class实现样式的切换。<template> <div class="container">  <div v-for="item in list" :key="item" :class="current == item ? 'current' : '.

2022-02-28 21:17:10 610

原创 flex布局

什么是flex布局flex布局即为弹性布局，使用display:flex进行布局，此布局使得盒模型布局更易使用。值得注意的是设为flex布局后，子元素的float、clear和vertical-align属性将失效。flex的使用当元素使用flex后，该元素则成为flex容器(container)，其容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。该容器中的元素则成为flex项目(it

2022-02-28 16:23:24 5472 3

原创 box-sizing属性的理解

使用原因在布局盒模型因为padding与border也是具有尺寸的，为避免其对页面布局产生影响，可使用box-sizing: border-box;属性设置盒模型，此时便可只用设置元素宽高。属性详解box-sizing的属性有content-box、border-box、inherit。content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，此为默认值。border-box：元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽

2022-02-28 14:19:19 4086

原创 cesium的使用

安装建议使用vue的cesium插件：vue-cli-plugin-cesium。vue add命令可零配置添加cesium:vue add vue-cli-plugin-cesium报错添加完成后如果报错cesium未定义(Eslint 语法校验问题)，则在package.json中添加以下代码：{ "dependencies": {}, "devDependencies": {}, "eslintConfig": { "root": true, "env": {

2022-02-28 09:52:36 968

原创 cesium中添加建筑白模

1、在cesium中添加模型依赖于Cesium ion帐户的资产id，在这里创建账户。2、上传模型(模型文件类型在Cesium ion中有说明，模型的提取办法可在这里查看)到账户中并平铺为3D Tiles类型便于cesium的使用。3、复制下资产id，替换下面代码中的id://添加Cesium ion帐户中的模型let newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({url: Cesium.

2022-02-28 09:51:57 1741 2

空空如也

空空如也