vue2.0 使用过程中遇到的问题集
文章平均质量分 50
vue2.0 使用过程中遇到的问题集
w-somebody
这个作者很懒,什么都没留下…
展开
-
前端 文件(文档、excel等)下载
文件下载是项目开发过程中经常提到的需求点,本文对以往用过,见过的文件下载方法进行一个汇总,如果后面有遇到,会继续进行补充一、直接通过后台给的链接URL进行文件的下载,如后台给的文件下载地址为:http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx方式1: 直接使用 HTML的 a 元素进行文件的下载<a href="http://hrmanage-test.edtsoft.com/hr-manage-.原创 2022-01-26 11:30:05 · 366 阅读 · 0 评论 -
TypeError: this.CliEngine is not a constructor
今天做关于 vue 项目的小demo时,WebStorm 编辑器中一直出现这个错误:TypeError: this.CliEngine is not a constructor多亏万能的度娘,帮我解决这个问题,此文特此记录。解决如下1、点击出现红色提示的 Details ,可以看到编辑器的 Terminal 出现了提示2、点击 Teminal 提示的第一个链接,接着打开一个文件*3、找到文件中的 ESLintPlugin 方法,将 this.CliEngine = require(this.原创 2022-01-06 22:29:06 · 970 阅读 · 0 评论 -
ElementUI el-select 选项无法选择的问题
一、问题描述:今天测试反馈了一个bug:修改用户操作面板上,点击多选的下拉选择框(el-select)弹出面板–>点击选中或取消选中其中的选择项—>点击无反应<el-dialog title="修改用户" :visible.sync="open" width="600px" append-to-body> .... <el-form-item label="企业可见权限" prop="clientUnitIds"> <el-sele原创 2022-01-04 18:04:55 · 11330 阅读 · 4 评论 -
vue项目中报错: [Vue warn]: Failed to resolve directive: mode
1、问题:今天在做vue项目开发时,突然出现了以下的报错:[Vue warn]: Failed to resolve directive: mode翻译一下:未能解析指令:mode2、解决:在报错所在页面的文件搜了一下 ‘mode’,发现竟然是自己在使用双向绑定时把v-model写成了 v-mode,代码如下:<input type="text" v-mode="inputValue"/>于是将 v-mode纠正为 v-model,报错不再出现。<input type="t原创 2021-12-23 16:37:28 · 21446 阅读 · 8 评论 -
el-table组件fixed引起的表格布局错乱问题
背景:最近做项目时使用el-table组件,在使用fixed布局并设置height的表格遇到以下的问题:1、发现横向滚动条很难拉动2、进行固定列时出现了布局错乱,错乱效果如下图(参保人基础信息 列使用了fixed进行固定):解决:/*解决fixed引起的错位问题*/.el-table{ overflow: auto;}/*解决横向滚动条拉不动问题*/.el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-w原创 2021-12-17 14:13:55 · 3914 阅读 · 0 评论 -
vue控制台报错Duplicate keys detected: ‘xxxx‘. This may cause an update error.解决方案
1、背景:vue项目运行时,控制台报了下面图中的一个错,虽然不影响整体项目的开发,但每次看到这个红色的报错就闹心2、报错原因:网上查了资料,说是v-for循环里,key值可能重复了,所以会报这个错,于是就瞅了瞅对应页面的v-for代码,果然数据中有重复的数据3、解决办法:key值是必须唯一的,如果重复就会报错。我们可以把key值改为index(其实就是用索引做key值),就可以避免这个情况...原创 2021-12-06 10:04:37 · 4590 阅读 · 0 评论 -
el-table 可编辑列表
一、需求:1、列表前两列的表头,可以进行点击2、列表非前两列的表格项中,点击编辑图标可以进行编辑3、列表非前两列的表格项中,编辑文本失去焦点,变为不可编辑状态二、实现1、html<el-table :data="list1"> <el-table-column prop="name" align="center"> <template slot="header" slot-scope="scope"> <e原创 2021-11-30 11:16:38 · 1848 阅读 · 0 评论 -
vue项目中用于解决谷歌浏览器默认填充账号密码问题
最近使用vue+elementui搭建的项目中出现一个需求:谷歌浏览器第一次登录保存账号密码之后,后续在碰到需要输入账号密码时,浏览器会默认填充账号密码,现在需求是不想要账号密码默认填充的效果解决方案:1、在账号输入的元素上加上 auto-complete=“new-accounts”2、在密码输入的元素上加上 auto-complete=“new-password”最后强调:a...原创 2020-03-27 09:03:50 · 1706 阅读 · 2 评论 -
vue项目中(vue-cli3)代理配置不成功 及 axios的 baseUrl 设置无效问题
最近开发项目时配置代理过程中遇到一个非常低级的错误,导致配置完代理后,项目运行请求接口一直是404;并同时因为这个低级错误,自己对前端vue项目的代理配置又混乱,直至发现问题后才对代理配置清晰明了起来。本文简单记录问题解决方式及自己对vue项目中的代理配置一点小理解,避免日后再次踩坑。vue项目中涉及的文件简单描述:1、该项目的后台的服务地址为:http://10.10.10.10/aa2、现在请求一个后台的验证码接口为: /code/img3、vue项目中环境配置(.env.developme.原创 2020-11-19 17:28:38 · 13566 阅读 · 2 评论 -
vue中style的scope属性
在vue项目中通常会给style标签加上scope属性,以此来实现样式的私有化,避免全局污染。但有的时候这个属性又会带来麻烦:当引入第三方组件且需要修改其样式时,通常出现没有修改成功的情况一、scope实现私有化样式的原理通过给DOM元素结构上以及css样式上添加一个不重复的标记,来保证其唯一性,以此达到样式的私有化例如:当使用第三方插件elementui的button组件,并在st...原创 2019-11-15 14:33:20 · 14146 阅读 · 0 评论 -
vue项目中使用websocket
一、前言:WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。二、在vue项目中使用websocket1、模板部分 <div></div></template>2、js部分&...原创 2019-08-19 17:56:19 · 1502 阅读 · 0 评论 -
vue项目中使用富文本编辑器(wangeditor)
wangeditor官方教程:https://www.kancloud.cn/wangfupeng/wangeditor3/一、在vue项目中安装wangeditornpm install wangeditor二、在vue页面中使用wangeditor,如在editor.vue文件中创建富文本编辑器<template> <div class="wang-edit...原创 2019-12-04 18:38:53 · 3092 阅读 · 0 评论 -
vue项目中使用$.once(‘hook:beforeDestory‘,() => {})清理定时器问题
在vue项目通常我们清理定时器的方法时,通常有两种方法方法一:1、首先在vue实例的data中定义定时器的名称:export default{ data(){ timer:null }}2、在方法(methods或者页面初始化的时候使用定时器)this.timer = setInterval(()=>{ //需要做的事情},1000);3、然后在页...原创 2020-03-30 20:57:08 · 15307 阅读 · 8 评论 -
npm安装vue-cli,一直停留在deprecated [email protected]: request has been deprecated, see https://github.com/req
安装vue-cli出现的错误原因资源问题,没有配置淘宝镜像解决①配置淘宝镜像 :npm config set registry https://registry.npm.taobao.org②重新安装vue-cli,即可成功npm install -g @vue/cli...原创 2020-02-25 23:14:14 · 29825 阅读 · 6 评论 -
vue的日历插件 vue-calendar-component
1、引入: npm i vue-calendar-component --save2、在vue文件中使用: < Calendar v-on:choseDay ='' v-on:changeMonth='' v-on:isToday='' >< /Calendar> import Calendar from 'vue-c...原创 2019-06-27 16:12:12 · 6625 阅读 · 1 评论 -
vue项目input框得到焦点选中文字
input框获取焦点时需直接选中文本内容:<el-innput v-model=“name” @focus=“selectContent($event)”>selectContent(e){e.currentTarget.select();}原创 2019-09-11 11:16:45 · 1258 阅读 · 0 评论 -
vue项目中引入lodash、js-base64、md5加密、echarts、jQuery、 js-cookie、elementUI库、less、axios和qs
1、安装lodash依赖npm i lodash -S或者cnpm i lodash -S2、在需要使用lodash的组件中使用直接使用md5import _ from 'lodash'或者let _ = require('lodash')let res = _.union(arr1,arr2,arr3);注明:也可扩展vue的插件lodash,可将第2步改为://引入...原创 2019-06-27 18:18:25 · 5106 阅读 · 0 评论 -
vue-cli3构建的项目使用compression-webpack-plugin 进行GZip压缩
使用vue-cli3搭建的vue 项目是没有 productionGZip配置的,需要你安装插件compression-webpack-plugin并在vue.config.js中进行相应的配置才能实现项目的性能优化1、安装插件:compression-webpack-pluginnpm i -D compression-webpack-plugin2、在 vue.config.js 文件中配置 compression-webpack-pluginconst compressionWebpac.原创 2020-12-28 11:07:46 · 5731 阅读 · 7 评论 -
vue项目入口文件main.js中的 Vue.config.productionTip
1、在vue项目的入口文件main.js中出现 Vue.config.productionTip = false2、当注释该代码,那么在控制台多出了一句warning:You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See ...原创 2019-10-12 16:25:55 · 2445 阅读 · 0 评论 -
vue路径详解
1、路径(./):表示相对路径,如./component/header.vue ,表示的是在当前目录同级的目录component文件夹下的header.vue文件。2、路径(/): 表示绝对路径3、路径(@/):表示相对路径,在webpack.config.js文件中:resolve:{ alias:{ 'vue':'vue/dist/vue.esm.js', '@'...原创 2019-08-13 23:03:02 · 2922 阅读 · 0 评论 -
vue 元素绑定的@click方法失效问题
今天做项目时发现一个在元素绑定的事件不生效的问题,作此记录以提醒自己。具体代码如下:<el-button @click="clickFun">按钮111</el-button><button @click="clickFun([1,2,3,4])">按钮222</button>import {getInfo} from './api/test.js' //api接口export default { name: 'test', data(){原创 2021-10-12 22:19:53 · 20046 阅读 · 0 评论 -
vue-devtools安装与使用
vue-devtools是chrome的用来调试vue项目的插件,安装使用步骤如下:1、在github上下载vue-devtools安装包,进行解压下载地址:https://github.com/vuejs/vue-devtools2、cmd打开下载的文件(vue-devtools-dev),安装依赖包:npm install3、在下载的文件中(vue-devtools-dev)执行:n...原创 2019-10-22 10:43:15 · 242 阅读 · 0 评论 -
vue中设置按钮不能进行短时间的重复点击而重复的触发事件
1、在项目中遇到一个问题:当事件中的代码执行耗费时间,且用户在短时间不断点击按钮,造成短时间多次触发了按钮的事件(不断向服务器发起请求)2、解决办法①方法一: 定义一个变量(如:isLock)来控制按钮的disable属性,进而来防止用户短时间的多次点击按钮②方法二:全局定义一个指令,通过在按钮绑定指令来控制按钮被点击间隔时间3、具体实现:方法1步骤:① 首先设置变量isLock属性值为false,使得按钮可点击(disable: true)② 当用户点击后,立即设置按钮不可点击(disabl原创 2021-10-11 18:00:30 · 3321 阅读 · 3 评论 -
vue项目中实现网页的截图功能 (html2canvas)
最近做地图的项目,有个需求就是前端需要将网页的内容生成一张图片,这个功能如果让后端做的话,前端需要把大量的代码传给后端,然后后端去解析生成图片,再返回给前端,幸运的是,html2canvas.js让这件事情变得简单起来,下面是我在vue项目中实现截图功能的代码:一、先安装html2canvasnpm install html2canvas --save或者yarn add html...原创 2020-04-09 17:34:35 · 14689 阅读 · 2 评论 -
vue项目可以通过本机localhost和本机或其他电脑使用ip地址访问的方法
问题描述:本机的vue项目通过npm run dev 或者npm run serve的方式启动后,在浏览器可以通过输入localhost:8080就可以访问但当在本机或者其他电脑的浏览器中输入本机的ip地址+端口,即:192.168.212.82:8080,不能访问成功解决方法:1、解决方法一:找到项目的配置文件:/config/index.js,修改index.js文件中的host值,...原创 2020-01-08 14:44:51 · 5036 阅读 · 2 评论