weixin_65793170的博客

⭐Vue 中的 Axios 是一个基于 Promise 的网络请求库，用于在浏览器和 Node.js 环境中发送 HTTP 请求。它提供了一种简单而强大的方式来与后端进行通信，并且可以与 Vue.js 框架很好地集成，使得在 Vue 应用中发送和处理 HTTP 请求变得非常容易。这里来简单记录一下

⭐此电脑>属性>高级系统设置>环境变量>系统变量>选择变量Path>点击编辑>点击新建（输入路径），然后记得确定保存呀！报错解决。

⭐ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题

⭐我们在启动项目时，有时遇到一个常见的错误信息：'vue-cli-service' 不是内部或外部命令，也不是可运行的程序。这通常意味着虽然已经安装了Vue CLI，但系统却未能正确识别 vue-cli-service 这个命令行工具。此问题可能源于多种原因，包括全局与本地依赖项配置不当、环境变量设置不准确或是项目中缺失必要的开发依赖等。这里快速定位并解决该问题，确保能够顺利地继续进行项目的开发工作。

⭐我们在写项目的时候，有时候难免会用到地图，这里给大家分享一下，如何在 Vue 项目中使用百度地图，获取可视区域坐标，以及添加线路、站点。简单记录一下

⭐this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。

⭐el-cascader是 Element UI 组件库中的一种组件，用于实现级联选择器的功能。级联选择器是一种常见的用户界面元素，通常用于表示有层级关系的数据结构，如国家-省份-城市的选择、文件目录选择等。当用户选择一个选项时，下一个级别的选项会根据前一个选项动态变化，从而形成级联效果。这里来记录一下

⭐Vue.js遵循“单向数据流”的原则，这意味着数据应该从父组件向下流动到子组件，而子组件不应该直接修改父组件的数据。然而，在某些情况下，你可能需要子组件能够影响父组件的状态，这就形成了所谓的“闭环”。

⭐一. this.reload()方法（体验度好，无空白页面，相当于页面数据重置））二. 利用vue中的路由方法（偏向于刷新页面）三. 利用window的reload方法（强制刷新）

⭐在Vue中实现一个大屏上的标签自动向上滚动的无缝动画，通常涉及到对列表元素的动态管理以及CSS动画或过渡效果的使用。这里来记录一下

⭐上期我们介绍了，如何在vue项目中，使用百度地图，这期说下如何在百度地图上添加线路和站点。实现效果如下

⭐报错如下，意思是连接到'ws://…'failed:连接建立错误；connection to ‘ws://...‘failed: Error in connection establish

⭐连接后断连的原因：前端给后端传递Authourization（token验证）时，后端需要接收处理并设置响应标头，不然就容易出现上叙错误；解决方法：1、传递验证权限；2、后端处理后，前端收到的响应标头；

⭐Vue项目，在 Nginx 服务器部署上线后，页面刷新丢失。​只需要在 nginx.conf 文件中，添加以下代码，请看location / { …… try_files $uri $uri/ /index.html;}这个配置通常用于单页应用的前端路由处理。​

⭐补充：获取参数的时候是$route（$route是用来获取路由信息的），而不是$router（$ router是用来操作路由的），然后以上都可以写成行内跳转方式，例如@click="$router.back(-1)" 。

⭐在移动端使用 REM（Root EM）适配是一种常见的响应式布局方案，它可以根据屏幕尺寸动态调整元素的大小，以适应不同的设备和分辨率。这里来记录一下

⭐1、首先安装crypto-js插件，​安装命令如下：npm installcrypto-js -S；2、新建crypto.js文件，封装自定义加密和解密方法，并导出

⭐websocket事件（仅供参考）： let socket= null； //socket/ws socket = new WebSocket("//请求地址")；//定义socket socket.onopen 连接建立时触发 socket.onmessage客户端接受服务端数据时触发 socket.onerror 通信错误时触发

⭐我们在使用 npm 管理项目依赖时，经常需要安装各种包来支持开发或生产环境。npm 提供了几个常用的命令行参数，如 -S、-D 和 -g，这些参数用于指定所安装包的不同作用范围和类型。理解这些参数的作用，对于有效地管理和维护项目的依赖关系至关重要。这里来简要介绍这三个常用参数及其用途，帮助我们更高效地利用 npm 进行项目开发。

⭐我们都知道 Vue Baidu Map 是一个基于VueJS的百度地图组件库，它封装了百度地图Web API，使得在Vue应用程序中集成百度地图功能变得更加简便。简单记录一下

⭐上期我们介绍了，如何在百度地图上添加线路和站点。这里我们来分享一下，如何获取地图可视区域的四个角坐标。简单记录一下

⭐1、keep-alive缓存问题导致（当使用keep-alive的时候，页面第一次进入时，钩子函数的触发顺序created -> mounted -> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated）；2、created和mounted函数写了两个或多个问题导致;

⭐Vue项目报错：Uncaught SyntaxError: Unexpected token ‘＜‘ (at TrackAnimation.min.js:1:1)

⭐Vue项目报错：No suitable ObjectReader found fornjust.system.api.domain.SysDictData

⭐在 Vue.JS 中，兄弟组件之间的通信由于缺乏直接的父子关系而变得相对复杂。然而，Vue提供了多种机制来实现这种同级组件间的有效数据共享与通信。Vue2常见的方法包括使用事件总线（Event Bus）或 Vuex 状态管理库，这些方案能够帮助我们轻松地在没有直接关联的组件之间传递信息和状态，确保应用逻辑的一致性和可维护性。兄弟组件，就是同级别的组件。

⭐Vuex是vue的状态管理工具（可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据。如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用Vuex。一般创建项目时都会勾选上Vuex，或者通过npm或yarn安装。这里来简单记录一下

⭐在实际应用中，我们在使用query传递参数时，跳转之后，在新的页面对这个参数进行接收，但是在其页面使用时，刷新页面后数据会丢失，第一次跳转时数据是正常显示的，但第二次刷新页面数据会变为[object object]，针对此问题，这里来记录一下。

⭐第一步：在PowerShell中输入get-ExecutionPolicy，一般查询到的状态为Restricted； 第二步：电脑搜索Powershell，用管理员模式打开windows的PowerShell，然后在命令行输入set-ExecutionPolicy RemoteSigne，回车，输入Y确定执行；第三步：最后在vscode验证是否能够执行vue命令；vue命令 执行成功。

⭐问题原因：因为使用富文本编辑器上传文件时的代理IP为 '/dev-api' ,而前端展示页面时的代理IP 为'/api' ，因为我这边 上传文件 和 渲染数据 是两个项目，所以导致图片路径丢失，图片没有显示。

⭐作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个github上一个不错的拖拽JS库，能满足我们在项目开发中的需要，支持Vue和React，下面是SortableJS的使用详细。简单记录一下

⭐我们在写代码的时候，代码提示会对我们有很大帮助，但有时候代码提示就会变得没有反应，原因其实就是因为插件冲突，是Vetur和Eslint冲突，解决方法就是将vuter回退到之前的版本。下载完成以后，重新加载，然后你就发现，代码提示问题就解决了。

⭐在现代Web应用中，数据量庞大，一次性加载所有数据，不仅会增加页面加载时间，还会消耗过多的网络资源和客户端内存。因此，分页技术成为了优化用户体验和提高性能的关键手段之一。而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理数据，做前端分页。这里详细介绍下如何使用 VueJS 结合Element UI的分页组件实现前端分页，并通过一个具体的例子来展示其实现过程。而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理

⭐在网站设计中，飘窗广告是一种常见的营销策略，用于吸引用户注意力。而在 Vue 中实现飘窗效果，不仅能提升用户体验，还能增加网页的点击率。这里将详细介绍如何使用 Vue创建一个可定制的飘窗组件。

⭐相信大家在平时工作中，难免会遇到开发大屏的需求，页面中有很多比较炫酷的CSS效果。这里给大家推荐一款大屏数据展示组件库，里面有各种边框、装饰、图标、飞线图、水位图、轮播表等等，支持vue和react，有很多炫酷效果。DataV 是阿里云推出的数据可视化工具，是阿里云的数据可视化应用搭建平台，‌旨在让更多的人看到数据可视化的魅力，‌帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，‌满足会议展览、‌业务监控、‌风险预警、‌地理信息分析等多种业务的展示需求。‌主要用于创建大屏展示、仪表盘和数据

⭐Cookies是网站发送至用户浏览器的小型文本文件，存储于用户设备上，用于追踪用户活动、保存偏好设置及维护登录状态。当用户重访网站时，浏览器会回传Cookies信息，使网站能识别用户，提供个性化服务。简而言之，Cookies帮助网站记住用户，实现定制化体验。而js-cookie和vue-cookies都是vue项目中的插件。下载相关依赖后，可以在项目中用来存储、获取、删除Cookie等操作，思路相同，但操作时稍有不同，当然也可以用原生js来获取Cookie。这里来简单记录一下

⭐vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，基本能满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下，使用详细；1、安装相关依赖；2、全局引入组件；或则局部引入；3、组件使用，配置相关属性；

⭐watch的相关属性：1、handler(newVal, oldVal) {} ,译：回调函数，变化时触发，有两个参数，一个是新值，一个是旧值；2、immediate: true,译：立即监听，开启时，页面加载时，默认执行一次；3、deep: true,译：深度监听，当监听的数据嵌套层级较深时，开启深度监听；

⭐全景效果我们都知道，常用于虚拟场景体验，具体怎么实现，这里给大家推荐一款组件，便于实现全景的真实效果，Photo Sphere2、页面引入；3、然后使用；详见官网 / 更多：Photo Spherehttps://photo-sphere-viewer.js.org/

⭐vue项目报错，Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. 翻译：在CanvasRenderingContext2D上执行'drawImage'失败:image参数是一个宽度或高度为0的canvas元素。解析：这种报错，一般出现在

⭐el-table是我们日常开发中常用到的element里的表格组件，然而有时候我们就会用到，点击表格内容复制到剪切板的功能，今天就来分享下，表格中的点击复制功能