分类：Vue

2020
10-28

解决vue项目运行npm run serve报错的问题

先来一张报错的截图先去配置环境变量C:\Users\lgd\AppData\Local\Programs\MicrosoftVSCode\bin的后面配置；%SystemRoot%\system32;一定要注意分号，然后在path环境中配置C:\Windows\System32最后去项目安装依赖npmi运行项目npmrunserve如果这样子项目还是报同样的错误，那么就把node全局卸载，去控制面板卸载，然后安装，最后安装依赖，运行项目就可以成功了补充知识：vuenpmrunserve报错Cannotfindmodule'eslint-p... 继续阅读 >

2020
10-28

如何构建一个Vue插件并生成npm包

    vue的插件一般用来添加全局性的功能，具体可分为：添加全局方法或者属性；添加全局资源（指令、过滤器等）；通过全局mixin方法添加一些组件选项；在Vue.prototype上添加Vue实例方法；创建一个库，提供自己的API，同时提供上面提到的一个或多个功能；    一般来说我们在项目中倾向于第五种方式，可以通过创建一个js文件包含我们需要添加的多种全局性功能，指令、过... 继续阅读 >

2020
10-28

vue通过接口直接下载java生成好的Excel表格案例

通过浏览器直接访问导出接口就会自动下载创建好的Excel表格。但是我们在vue里使用axios请求接口，一般是处理json数据，如果要处理文件流数据，需要做下特殊处理即可直接下载文件。假如下载Excel接口为：/apis/downExcel，则请求如下importaxiosfrom'axios'exportconstexportFile=params=>{varparam=newURLSearchParams()param.append('beginTime',params.beginTime)param.append('endTime',params.endTime)... 继续阅读 >

2020
10-28

详解vue3.0 的 Composition API 的一种使用方法

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >

2020
10-28

vue3.0 加载json的方法（非ajax）

问题加载json一定要用ajax的方式吗？最近学习vue3.0，在实现一个功能的时候发现一个问题——写代码的时候，需要的json太长、太多，和代码放在一起太混乱。看代码总有翻来翻去，又没有“折叠”功能。那么能不能把json放在一个单独的文件里面保存，然后在加载进来呢？查了半天的资料，发现那叫一个折腾呀，各种各样的配置不说，最后还需要用ajax的方式来加载。这个，这么简单的事情为啥要这么折腾？你看引用组件是不是很方便？一行代... 继续阅读 >

2020
10-28

Vue+Element自定义纵向表格表头教程

如下所示：代码如下：<tablestyle="width:100%"class="myTable"><trv-for="(item,i)instatDatas":key="i"><tdclass="column">{{item.key}}</td><tdclass="column">{{item.value}}</td></tr></table>绑定的是statDatas属性是一个json数组，由keyvalue组成的json，如果需要多列就直接增加属性就可以。优美样式：.myTable{border-collapse:collapse;margin:0auto;text-align:center;}.myTabletd,.myTa... 继续阅读 >

2020
10-28

vue3.0 的 Composition API 的使用示例

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >

2020
10-28

Vue中用JSON实现刷新界面不影响倒计时

本文实例为大家分享了Vue中用JSON实现刷新界面不影响倒计时的具体代码，供大家参考，具体内容如下效果展示：部分代码<el-form-itemstyle="overflow:hidden"v-if="env==='dev'"><el-inputstyle="width:180px;float:left"v-model="ruleForm.nucCode"size="small"placeholder="请输入短信验证码"/><el-buttonclass="message_btn"@click="getNumCode"><spanv-if="isShowNucTime"style="font-size:16px">{{Nuc_time}}... 继续阅读 >

2020
10-28

vue render函数动态加载img的src路径操作

分享一下我去如何解决vuerender中如何正确配置img的src路径？一、我的项目中有俩层组件，第一层父组件，第二层是render函数封装的组件，父组件调用render函数组件二、render函数中需要创建<img>标签，img中的src是父组件传进来的；src正确传进来，图片却不不显示。三、解决办法：首先在父组件中将图片import进来，importemptyfrom"./img/empty.png";在父组件的data中声明一个变量，将empty图片引入进来empty:empty,父组件... 继续阅读 >

2020
10-28

在vue项目中 实现定义全局变量 全局函数操作

写在前面：如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有一些朋友对此不太了解，所以随便写出来分享一波。定义全局变量原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在main.js里面使用Vue.prototype挂载... 继续阅读 >

2020
10-28

vue3+typescript实现图片懒加载插件

github项目地址:github.com/murongg/vue…求star与issues我文采不好，可能写的文章不咋样，有什么问题可以在留言区评论，我会尽力解答本项目已经发布到npm安装：$npmivue3-lazyload#or$yarnaddvue3-lazyload需求分析支持自定义loading图片，图片加载状态时使用此图片支持自定义error图片，图片加载失败后使用此图片支持lifecyclehooks，类似于vue的生命周期，并同时在img标签绑定lazy属性，类似于<img... 继续阅读 >

2020
10-28

vue项目开启Gzip压缩和性能优化操作

vue项目开启gzip自拍压缩和部署nginx开启gzip优化性能第一步：在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩：npminstall--save-devcompression-webpack-plugin第二步：运行npmrunbuild打包项目，这时可能会报错，提示ValidationError:CompressionPluginInvalidOptions。根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。第三步：再次运行npmrunbuild打包项目，这时可能... 继续阅读 >

2020
10-28

Vue检测屏幕变化来改变不同的charts样式实例

css中我们经常会通过媒体查询就可以完成对不同的屏幕展现不同的样式在js中我们也可以通过检测屏幕的变化来展现不同的样式在我的实例中：因为第一次打开也不知道到底是应该展示哪一个屏幕，所以会进行先判断一次，之后用addEventListener来是实现功能，暂时是通过这种方式实现的，以后有更好的方法再更新。。。mounted(){this.checkScreen()},methods:{//屏幕检测变化checkScreen(){var_this=thisif(document.... 继续阅读 >

2020
10-28

解决ant design vue中树形控件defaultExpandAll设置无效的问题

页面步骤：1.设置a-tree标签2.默认的treeNodes值设置为空数组3.在mounted组件加载的时候给treeNodes的值赋值结果：设置defaultExpandAll无效，并不能展开所有节点原因：defaultExpandAll仅在组件第一次渲染时有效，不仅仅tree组件，其它组件的defaultXXX值都是这个行为，可以自行搜索受控组件/非受控组件的概念。如果你想异步获取数据后展开全部结点，可以使用非受控方式：https://codepen.io/lovefemi/pen/MMmRvx补充知识：AntD... 继续阅读 >

2020
10-28

vue下载二进制流图片操作

1、应项目要求，后台返回二进制流，而且乱码2、红色为必须this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}),{responseType:'arraybuffer'//指定返回数据的格式为blob}).then((res)=>{varsrc='data:image/jpg;base64,'+btoa(newUint8Array(res).reduce((data,byte)=>data+String.fromCharCode(byte),''));this.srcImg=src;//图片回显varlink=document.createElement(... 继续阅读 >

2020
10-28

解决vue scoped html样式无效的问题

1、问题场景page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值，//手动设置基准html{font-size:120px!important;}但是在page2引用的self.less里面设置了基准，竟然没有生效2、问题分析scoped属性在引用self.less的时候，使用了属性scopedvue中引入了scoped这个概念，设计思想就是让当前组件的样式不会修改到其他页面的样式，使用了data-v-hash的方式来使css有了他对应的模块的标识，通俗来... 继续阅读 >