首页 > 其他分享 >vue项目中遇到的技术难点

vue项目中遇到的技术难点

时间:2022-11-03 22:00:33浏览次数:54  
标签:难点 插件 vue 遇到 package patch 修改 pdf

A.项目中有pdf在线预览,打印功能。其中pdf在线预览时,中文乱码,设置了后端返回的格式为blob ,但是也不起作用。最后研究发现是用的vue-pdf 插件,这个插件本身有bug。
因为项目上线一直使用的vue-pdf 所以暂时不考虑更换插件。给插件官方提问题,等修复周期又比较长,薪需求等着上线。因此我们只能修改vue-pdf 源码,找到node_modules 修改一下源码。修改后,我们还要考虑怎么部署到服务器上,手动打包dist并放到服务器上显然是不明智的选择。运维说不能因为修改了源码,就放弃自动化部署。
因此我们需要下载patch-package这样一个插件,他可以说是专门管理npm上的插件,通过npx patch-package vue-pdf命令可以在项目根目录下生成patch 文件,里边包含修改前后的对比文件,一目了然

1.npm i patch-package
2.修改package.json,新增命令postinstall:
"scripts": {

  • "postinstall": "patch-package"
    }
    3.修改 node_modules 下的代码 。例如vue-pdf
    4.npx patch-package vue-pdf

这样就可以了。

B 例如我们项目中有一个动态table,列头非常长,单行数据非常多,所以就导致我们首次渲染时很浪费时间
解决方案:我们一开始只显示span 文字和例如下拉箭头,当我们鼠标真正click时 再变成真实的select 或者日期控件。

标签:难点,插件,vue,遇到,package,patch,修改,pdf
From: https://www.cnblogs.com/sweetpitaya/p/16624116.html

相关文章

  • 3.vue的插值语法
    插值语法就是将希望显示在页面的文本渲染出来,语法是{{}},在双大括号中可以添加变量,函数,表达式1.渲染变量1<!DOCTYPEhtml>2<htmllang="en">3<head>4<m......
  • 2.Vue的快速使用
    1.vue的导入1.1源码下载引入下载地址:vue3:https://unpkg.com/[email protected]/dist/vue.global.jsvue2:https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js1.2CDN引入<s......
  • 遇到困难看一看
    今天是工作效率很低,而且比较沮丧的一天。第一,数据库连接错误而不自知,明明连接的是远程库,以为连接到了本地库,导致连接的数据出问题而修改多次没有结果,还白白话费时间去找原......
  • vue(三)
    模板语法Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML......
  • 1.vue的介绍
    1.前端的发展介绍最开始由前端三剑客,css.html,js来写网页,用户发送一个请求,刷新一次页面ajax的出现,使得可以发送异步请求,实现局部刷新ajax更加成熟,使得前后端分离成为趋......
  • 从 0 搭建一个 vue3 项目
    一、先实现一个简易版本初始化npmnpminit-y//-y能省去填写信息的步骤,一步到位安装几个必要的依赖1npminstallcss-loaderstyle-loader-D//解析css......
  • VUE根据url下载文件
    方法一:constdownloadRes=async()=>{letresponse=awaitfetch(url);letblob=awaitresponse.blob();letobjectUrl=window......
  • Vue 下载本地静态资源
    项目需要下载本地的Excel文档,文档是放在本地的没有在服务器,所以需要下载本地静态资源文件,开始把文件放在了这里src目录下的assets资源文件下下载报错找不到文件路径......
  • vue下载后端文件流
    接口加上:responseType:"arraybuffer",exportfunctionpostExport(data){returnrequest({url:'http。。。',method:'POST',respo......
  • vue.js中实现阻止事件冒泡
    当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。 .stop是阻止冒泡行为,不让当前元素的事......