前言 最近在一次理解vue项目的代码时，发现周一对好多API都不太熟悉。这间接导致的问题是，代码理解速度要比平常要慢很多。于是乎，赶忙把vue API的学习提上了日程。 在下面的文章中，将地板式地扫盲vue3文档中API模块的所有内容，融入周一的理解进行深入介绍。下面就来一起看看吧~? 一、框架搭建 1、关于文档 首先附上官方文档的具体材料：cn.vuejs.org/api/ 2、VUE3 API整体盘点 在vue3的全新API中，有部分在vue2的基础上沿用了。还有另外一部分，是vue3所新增加的。我们先来看vu…

vchats的图例，有时候根据设计的需要，不一定用原来默认的位置，例如可能摆在图表的左边或者右边，也可能需要修改图例的颜色、文字等等，在vchart中是通过extend来设定的，示例如下： <VePie style="" :data="chartData" :extend="chartExtend"></VePie> chartExtend的内容如下(主要是legend的配置)： chartExtend: { legend: { top: 45, // 距离上边界的地址 show: true…

vue使用使用vchart，如果要统计两个维度，可以让Y轴左右各显示两个维度，例如： <VeHistogram :data="chartData" :settings="chartSettings" :extend="chartExtendBar"></VeHistogram> this.chartData = { columns: ['班级类型', '已开班级数', '已培训人次'], rows: [{'班级类型':'A班', '已开班级数': 5, '已培训人次': 2000}, {'班…

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即   来通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送…

因为域名有限，所以想把vue项目部署在某个域名的二级路径上，例如：https://www.example.com/someapp/下 nginx的配置如下： location ^~ /someapp { #proxy_read_timeout 1800; #proxy_connect_timeout 1800; #proxy_send_timeout 1800; try_files $uri $uri/ /index.html; root /var/website/; } 在/var/website下新建somea…

vue的项目本地能运行正常，但是build后把dist文件部署到生产环境（nginx）后，打开网站，一片空白，控制台提示： isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined at isURLSameOrigin (isURLSameOrigin.js?3934:57) at dispatchXhrRequest (xhr.js?b50d:103) at ne…

vue-router 默认路由模式为 hash 模式，该模式是使用 url 的 hash 来模拟一个完整的 url。但使用这种模式，URL 中会带一个 # 号（比如 http://127.0.0.1:9090/#/about），比较丑，不像是正常的 url。 除了默认的 hash 模式外，我们也可以用路由的 history 模式。 当我们使用 history 模式时，URL 就像正常的 url 了，例如 http://127.0.0.1:9090/about。不过要使用这种模式，还需要后台服务端的支持。下面以使用 …

在vue2.x下需要展示pdf，详见：https://blog.terrynow.com/2022/09/06/vue2-show-pdf-paging-http-header-with-token-pinch-zooom/ 不过在依赖添加了 后，有一个报错： vue-resize-sensor Cannot read properties of undefined (reading 'catch') 使用指定版本的pdfjs-dist和vue-pdf即可解决，如下： npm i [email protected]…

我们开发普通的下载链接，只主要写一个标签，不过有一些需求是要针对这个下载链接做权限校验，而权限校验需要在请求这个链接的时候，在Header里加上token之类的。 使用axios来调用get请求，并发送自定义的Header，然后把请求到的数据组成下载内容，示例代码如下： download() { axios.get('http://192.168.1.1:8081/api/export_pdf', { headers: { 'Content-Disposition': "attachment; filename=d…

需要在vue项目中的页面中显示PDF文件，经过一番查找，决定使用这个项目：https://github.com/FranckFreiburger/vue-pdf/ 另外还有手指缩放功能，使用的是：https://github.com/drozhzhin-n-e/vue-pinch-zoom package.json中引入： "dependencies": { "pdfjs-dist": "2.5.207", "vue-pdf": "4.2.0", "vue-pinch-zoom": "^0.2.5" } 最简单的使…