![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 77
奔跑的痕迹
I like to learn new technologies every day and I am willing to constantly improve myself.
展开
-
将excel表格转换为element table(上)
由于行列内容太多看起来有些乱,这效果的确不是想要的,于是想到了使用element ui 的table 来加载。最近有个功能需要将excel展示到html 界面里面,看是简单的一个需求也是需要费尽心思才完得成。于是根据这个案例开始重新组织xlsx 加载返回的数据。想要把excel 读取出来,于是使用xlsl的插件。看起来是要好很多了,接下来就是进行行列合并的操作了。将数据转换为html 再使用v-html加载数据。通过插件可以获取到已经分析好的数据。再增加一个重构表单数据的方法。首先要将数据行列重新组装。原创 2024-07-02 21:47:57 · 334 阅读 · 0 评论 -
openlayers自定义投影坐标系(EPSG:4542),GeoJSON读取geometry和坐标转换
在做二三维开发中时常会遇见,形形色色各种类型的投影坐标系,然额不管是OL还是CESIUM他们都只支持EPSG:3857和EPSG:4326类型的坐标系,所有我们不得不将 其他类型的投影坐标转换为4326或者3857,目前比较好用的要属proj4, 当时刚开始使用也是十分笨拙,走了些弯路…项目中时常会得到shp转换的大量geojson数据如:这种一大堆的坐标系,且需要全部转换,起初我是这样做的:1、拿到所有的featurens,2、申明一个临时变量来保存所有的features3、然后循环调.原创 2021-11-27 12:32:43 · 4670 阅读 · 0 评论 -
vue-router路由history模式+nginx部署项目到非根目录下(实践版)
你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他吗你这样执着到底累不累明知他不会那么容易只不过想早点睡一觉可惜他无法给你机会翻遍网络没有想要结果喔,算了吧。。。。。不我还要再找找最近经历了如上歌词的生活,大致是这样的:开发一个项目,发现使用hash 老是带有一个#号,如localhost:8080/#/这样始终够美观,于是就想着往往his.原创 2021-11-23 21:55:57 · 5203 阅读 · 1 评论 -
vue3+vite2+element-plus+ts搭建一个项目
花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify图标数据预览搭建中踩过动态路由生产环境报错,json循环依赖,路由跳转 ‘window.webkitStorageInfo’ is deprecated. 浏览器卡死等问题但这些都已经处理了,这个简单系统下载就可以使用,喜欢的自取,顺便给个star,3Q....原创 2021-10-24 09:03:33 · 5412 阅读 · 2 评论 -
禁用input自动补全,模拟type=password输入字符显示为星号
根据改地址做了一个模拟如下:<template> <div class="text-input" :class="right ? 'textinput-right' : ''"> <span v-if="star" class="pwd-txt" :style="right ? { paddingRight: '5px' } : { paddingLeft: '5px' }" > {{ password原创 2021-03-31 21:45:52 · 2524 阅读 · 0 评论 -
vue项目连接socket.io跨域及400异常处理
node 项目中app.js /* * @Descripttion: * @version: * @Author: dex * @Date: 2021-01-21 18:01 * @LastEditors: dex * @LastEditTime: 2021-01-21 18:01 * */ const app = require("express")(); var http = require("http").createServer(app); var sock原创 2021-01-30 22:33:30 · 1569 阅读 · 3 评论 -
Error in render: “TypeError: Cannot read property ‘0‘ of null“
根据操作,直接就指向了这个methods, 找了半天你会发现,这个错误并不是这个地方引起的,why?转了一圈回来,发现是html中引起的原创 2020-12-27 10:07:01 · 4179 阅读 · 1 评论 -
vscode 配置代码自动格式化加修复
子曰:“工欲善其事,必先利其器”, 编码必须的就是有一个顺手的ide,然而光有还不行,还要懂得配置,毕竟不同的团队代码规范不同,如目前用得较多的就是eslint,今天就顺便记录下vscode + eslint 配置代码检测文章目录一、安装 Eslint二、安装 Prettier-Code formatter三、安装Vetur四、配置 setting.json五、配置 .eslintrc.js六、配置 .editorconfig一、安装 Eslint首选得在ide安装eslint插件二、安装 P.原创 2020-10-24 08:23:13 · 5939 阅读 · 2 评论 -
把vue组件发布到npm
一直以来项目都使用他人开发的组件,于是乎自己也想倒腾着做一个,发布到npm 在其他项目里直接使用,这个组件上传和纯js 还是有一定区别的,在这个过程中也遇到了一些小问题,网上找了许多案例,都不是太全面,趁有时间自己记录一下参考网上大佬案例改装一个适合自己需求的运动的时间刻度一、项目创建首选是创建一个项目,这个就不用说了,大家都会c:> vue create my-project二、组件编写在src/components下创建一个TimeAxisAuto.vue三、全局注册再建.原创 2020-07-26 23:43:15 · 1027 阅读 · 0 评论 -
Vuex modules 中active相互调用
const actions = { // login userLogin({ commit, dispatch, rootGetters }, userInfo) { commit('permission/SET_ROUTES', [], { root: true }) // 清空permissin下SET_ROUTES console.log(rootGetters['user/usermenu']) // 获取user 模块下的usermenu属性 dispatch.原创 2020-07-26 12:30:56 · 1525 阅读 · 0 评论 -
Vue computed,watch本质区别
今日项目需要一个详细的权限配置,如:路由权限,页面tabs权限,操作权限;而路由权限大都知道就不赘述,而操作权限这就涉及页面中每个按钮了,这里使用VUEX进行管理1.配置storestore 中 user.js 配置如下const mutations = { SET_PERMISS_ARR: (state, permiss) => { state.permissArr = permiss }}const actions = { // 获取权限 getauthList({ .原创 2020-07-18 12:47:19 · 492 阅读 · 0 评论 -
踩了一个基础 知识的坑
看就遇到的图上说的,当修改某一个select 其他两个也会同着更改!html是这样的 <el-form-item label="推送消息类型" > <div v-for="(hItem,index) in pushSecondTypeOfHour" :key="index" class="items-second-type"> <el-select v-model="hI...原创 2020-05-29 22:32:21 · 291 阅读 · 0 评论 -
[vuex] unknown action type:***
vuex 分模块后使用mapActions调用action老是提示 [vuex] unknown action type:*** 异常目录index.js是这样的 import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' Vue.use(Vuex) const modulesFiles = require.context('./modules', true, /\.js$/) .原创 2020-05-27 15:41:41 · 7088 阅读 · 4 评论 -
props传值遇Cannot read property getAttribute of undefined异常
今有一个echarts 图标的子组件使用watch 监听接受父组件传入的data,而在父组件页面再次根据日期筛选数据,重新传入子组件进行图表重绘时老实会提示报错vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'getAttribute' of undefined"found in原来是异步加载数据切换的锅,.原创 2020-05-27 15:15:30 · 862 阅读 · 0 评论 -
vue数组更改页面无法刷新
今一个图片列表的数组,在新增数据时页面会同步相应,但是进行删除操作时老是无法实现页面及时刷新,使用过vue set也没见效果,纠结半天,哎原来是嵌套对象的坑页面加的图片列表的html这里是一个方法调用接口获取一些返现的数据 赋值给ruleForm,其中dataImages是一个保存图片的数组对象下面就是页面返现图片或者上传,删除操作而就是在这个进行删除的操作时发现了删除完 dataImages中的数据,页面没有刷新的问题试过许多办法无果,最后还是在看console中发现了端倪1、第一.原创 2020-05-23 14:58:47 · 759 阅读 · 0 评论 -
vue-router几大坑
如今vue使用率很高,采坑这就是很平常的了,使用了几年坑都依然没踩完,纠结呀一、route和router大家都知道vue 是组件化开发,页面很多路由难免,这里是路由配置router.js最外层是 new Router创建router 实例,该实例里面是多个route配置注意:这里实例是一个 Router 而 其中参数是routes千万别写成routers了二、params与query参数传递,可以使用params和query的方式进行参数传递需要注意的是router为VueRout.原创 2020-05-20 06:49:06 · 1003 阅读 · 0 评论 -
vue cli3 整合Cesium,处理build 时内存溢出问题
一直使用cesium,但是都是使用script直接引入的,但是在将其放置在增加路由的子页面中中时会出现一个问题,刷新后提示cesium is undefined看直接引入cesium.js<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <met...原创 2020-05-02 07:01:23 · 3604 阅读 · 2 评论 -
vue 中render执行流程梳理
用了多年vue 今天对自己了解的render 做一个梳理一、使用template模板先从vue 初始化开始:众所周知项目的main.js中定义了var app = new Vue({})这vue初始化操作其实他会执行到这个方法中的_init函数,在这个方法执行一些列的初始化后,判断$options是否定义el,如果定义调用vm.$mount(vm.$options.el)函数,...原创 2020-05-01 17:45:25 · 1676 阅读 · 0 评论 -
整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频
目前有一个关于接入海康监控进行视频融合的项目需求,按理说在前端技术发展如此迅速的今天,使用web播放一个视频应该是不算什么难事,只是万事都有意外,因很多视频厂家的监控数据都不是普通的mp4啥的,所以使用普通的object 或者video 是播放不了的,必须需要一些额外的插件进行支持,今天我们就来加载一个rtsp格式的视频文章目录一、安装合适的浏览器二、安装VXG Media Player三、...原创 2020-04-20 22:12:24 · 16302 阅读 · 90 评论 -
svn is already locked 最终解决方案
今日执行项目更新时,手贱点击了cancel 中断了操作,最后导致项目被锁,杯具了。首先想到了Clean up直接提示看来不行呀…// 省略 n 多种尝试最后使用删除db 中的 lock 表来解决了这个问题首先cd 到项目下然后执行如下操作 c:\> sqlite3 .svn/wc.db "select * from wc_lock" c:\> s...原创 2020-03-28 17:13:46 · 1110 阅读 · 0 评论 -
.cur 图片加载提示 You may need an appropriate loader to handle this file type
最近一个gis 项目需要加载一个.cur的图标,但是编译时提示You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Sour...原创 2020-03-26 20:43:19 · 2899 阅读 · 2 评论 -
Request header field userRole is not allowed by Access-Control-Allow-Headers in preflight response.
使用一个axios 遇到同事设置的请求头在我请求的接口中部被允许最后使用transformRequest 干掉其他的key axios.get('https://www.baidu.com',{ transformRequest :[ (data, headers) => { delete heade...原创 2020-03-06 21:40:19 · 539 阅读 · 0 评论 -
npm run serve/build 背后的真实操作
vue CLI 用起来的确很舒服,方便省事,但他经过层层封装很难明白,执行完那个npm run serve/build 后他都干了些什么,甚至不知道整个项目是怎么跑起来的,今天自己抽时间就去瞅瞅,为加深记录特此记录记录文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...原创 2020-02-28 18:05:07 · 11488 阅读 · 1 评论 -
css预编译sass和stylus简单使用 (带node-sass安装失败解决方案 )
目前css 流行的三大预编译有stylus、less 、 sass 说白了这些东西就是为了提高编码效率,规划css 代码的,详细大家less 就不用多说了用得都比较多了,只是看看使用stylus, sass定义二外的文件是以 .styl 为后缀 ,他可以文件中定义方法同时使用变量, 属性与值间可以 使用空格分隔,结尾不需要分隔符如: // 背景图片 bg-image($url) b...原创 2020-02-27 18:14:04 · 1490 阅读 · 0 评论 -
vue横向导航条滚动到顶部固定同时瞄点对应内容(copy即用)
这里监听window 的scroll实现一个页面滚动,导航菜单定位,内容联动的一个简单组件,结合一些案例,按需进行了整合,在此记录一下效果图如下 具体实现如下一、先创建一个NavigateTool.vue导航组件html<template>...原创 2020-02-19 23:00:59 · 2914 阅读 · 0 评论 -
TypeError: this.CliEngine is not a constructor
vue cli3 项目老是提示TypeError: this.CliEngine is not a constructor这个,看着特别扭解决方法也不难,直接点击Details然后再点击,如下第一个文件链接找到如下方法 function ESLintPlugin(state) { this.filterSource = state.filterSource; ...原创 2020-02-12 14:54:51 · 14825 阅读 · 5 评论 -
webpack Dev Server Invalid Options options should NOT have additional prop
今日npm run serve时提示ERROR ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties 无效参数配置?如图:看提示好像是说 webpack 的dev server配置有点问题 ,于是去vue.config.js 探个究竟注意到了如下红箭...原创 2020-02-11 20:36:04 · 10335 阅读 · 1 评论 -
运行和编译时期资源加载的不同【vue】
开发语言都有编译和运行两个阶段,很多时候这个也会代理许多bug如:一个项目在开发阶段测试没有问题,然上线发布后就会有这样那样的问题,譬如说图片的加载,静态数据(js,css,json)读取错误一 、加载图片资源接下来我们就使用vue的项目默认首页面的img来测试1、使用data挂载url我们把这个image的src改一下改为挂载到data 如保存刷新图片报404为啥会这丫呢?...原创 2020-01-17 21:17:29 · 672 阅读 · 0 评论 -
vue中嵌入MP4 只有声音没图像
最近一个项目需要在页面嵌入一段视频,当然首选iframe了,直接嵌入了youku的视频,没问题,我想ok了。于是将url替换为本地的MP4发现只有声音没有任何图片,奇怪了,我首先想到是不是vue项目使用这iframe嵌入MP4不行;于是我有使用了vue-video和 vue-video-player来替换iframe 可是最后依然如此。怀疑是MP4格式问题,于是去查相关的资料,发现【HTML5中...原创 2020-01-12 13:20:58 · 2981 阅读 · 0 评论 -
vue CLI3 创建项目fetchMetadata资源拉取过慢解决方法
最近将vue cli 升级到了 v4.0.5 创建项目的时候发现慢得想个蜗牛这个一拉就是半天,还指不定那个时候就卡死在那里了,哎最后发现是使用了淘宝镜像引起的,奇怪的是 cli 2的时候不是需要设置国内淘宝镜像,那样才快吗! 升级到了4就反过来的?解决办法挺简单,打开如下目录的 .vuerc文件将其中的"useTaobaoRegistry": true 改成 "useTaobaoR...原创 2020-01-09 06:33:40 · 1055 阅读 · 1 评论 -
使用openlayers扩展插件ol-ext设置地图指定区域高亮
最近要实现一个从底图向上发光的功能,着实纠结了好久,起初像是使用polygon 颜色透明度来实现,但毕竟底图不亮,增加图层效果不理想呀一、ui设计是这样二、使用polygon着色效果是这样 import {styleSwitch} from '@/components/common/set_style'; mapInit(){ this.map...原创 2020-01-04 22:00:11 · 4900 阅读 · 11 评论 -
TypeError: Cannot read property 'getAttribute' of undefined
今天使用echarts + vue 做 图标,运行时提示vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of undefined"’网上找了些朋友说是,什么要将加载放到mounted的this.$nextTick中,其实不...原创 2019-12-31 11:03:57 · 4947 阅读 · 5 评论 -
设置nginx允许服务端跨域
目前项目大多使用前后端分离的模式进行开发,跨域请求当然就是必不可少了,很多时候我们会使用在客户端的ajax 请求中设置跨域请求,也有的在服务端设置跨域。但是有时候会遇到不使用ajax也没有使用后端服务的情况(如:openlayers 加载本地的arcgis 瓦片数据),我们只需要进行一些静态资源的获取,于是我们把它交给了nginx 。一、未配置跨域情况看下面vue + openlayers 中...原创 2019-12-23 22:38:56 · 1265 阅读 · 0 评论 -
vue/cli3整合Cesium,加载离线arcgis 切片
最開始使用webpack進行cesium 集成, 出现了问题一大堆,最后只好选择传统的方法直接引入了,具体操作如下一、安装cesium首选创建一个测试项目 vue create test-cli3-cesium然后直接cd 到项目目录 ,使用npm 直接拉取cesium $ npm install cesium --save 安装成功后会在 node_modules 下 看见一个...原创 2019-12-18 20:43:20 · 1962 阅读 · 1 评论 -
nginx发布vue 项目,解决子页面刷新404问题
在本次使用nginx发布vue项目遇到 配置location 始终404 和 在项目子目录点击浏览器刷新出现404问题使用nginx发布vue项目,为了方便测试就下载了一个nginx 放置自己目录下nginx目录是这样的然后打开conf / nginx.conf 配置 server,首选监听808 设置服务名 listen 808; server_na...原创 2019-12-03 23:12:15 · 2211 阅读 · 0 评论 -
自定义组件模拟v-model
在项目中常常会遇到一个组件中引入好几个子组件的情况,而引入的子组件和子组件之间又需要有数据交互,如果使用父组件作为桥梁进行数据交互这个也是可以的,只是有些麻烦,so最理想的是子组件和子组件自己去交互,记录一下使用子组件和子组件传参并模拟v-model的一个过程一、创建项目先使用cli 创建一个测试项目二、添加依赖在 package.json中添加所需的element依赖 "de...原创 2019-11-17 11:41:54 · 429 阅读 · 0 评论 -
ESlint配置详解
开发中出现eslint提示代码格式错误,有时候不明白其配置规范,是件很头疼的事情到处找api又是半天;so记录一份配置详情便于开发中翻阅 { // 环境定义了预定义的全局变量。 "env": { //环境定义了预定义的全局变量。更多在官网查看 "browser":true, "node":true, "commonjs":true, "amd":true, "es6":true,...原创 2019-11-10 10:15:23 · 853 阅读 · 0 评论 -
二次封装Element UI Table实现动态列
开发中常会需要在一个页面显示一个table,而这个table的列是不固定的,而列名也是根据后台传入而动态加载的,so element ui 的table 已经不再满足需求,我们得在他的基础上再次封装增加 refactor_table.vue 组件<template> <el-table :data="tableData" border...原创 2019-11-01 22:47:00 · 762 阅读 · 0 评论 -
vue使用import()提示语法错误
使用import 引入 组件编译时提示语法检测错误解决方法1、直接安装D:\YLKJPro\CMWEB\03Implement\CustomMapWeb>npm install -D babel-plugin-syntax-dynamic-import 2、在 package.json 的"devDependencies"下增加"babel-plugin-syntax-d...原创 2019-10-28 11:36:21 · 8836 阅读 · 1 评论 -
vue项目提示TypeError: e.call is not a function
最近运行vue项目老是提示vendor.dll.js:7 TypeError: e.call is not a function如上一运行到该页面就会提示这个错误,虽然页面功能都没受到影响,但是这个必定会给后期发布后的项目带来极大的隐患,当然不能置之不理当初以为是数据为空引起的组件保错,就一层层删除掉组件,可最后任然提示错误最后查询文档发现是生命周期钩子函数引起的如:生命周期钩子函数中使...原创 2019-10-25 12:09:37 · 22985 阅读 · 3 评论