vue
文章平均质量分 77
sqwu
这个作者很懒,什么都没留下…
展开
-
【vite】vite项目从0开始配置eslint
🌵 vite创建的项目默认没有eslint,下面开始从0开始配置。原创 2022-04-24 16:39:58 · 8189 阅读 · 0 评论 -
【vue3】使用pinia替代vuex
💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。原创 2022-04-18 18:01:15 · 3073 阅读 · 0 评论 -
【vue3】使用vite搭建的项目需要安装的插件/配置
项目基于vite+ts+vant+axios1.创建项目项目名称是myProjectvue create myProject2.vetur报错调整由于vue3引入组件后不用在components中声明,vetur插件会报错解决办法:vscode设置 -》 搜索vetur -》 找到下面这个选项,把他关掉。然后重新打开文件,发现没有报错了3.vite2使用eslint校验安装eslint执行命令npx eslint --init,按照以下选项配置依赖,会顺带下载四个依赖下面原创 2022-04-11 10:31:44 · 4497 阅读 · 0 评论 -
【个人笔记】解决fixed布局,安卓软键盘会顶起底部固定的按钮的问题
1.问题fixed布局的tab栏在安卓浏览器上,聚焦在输入框时,弹出的输入框会将tab栏顶到输入框上方,挡住页面。fixed定位的tab栏出现的键盘将tab栏顶到页面中间2.思路监听键盘弹出的事件…也就是监听页面的可见高度clientHeight先保存页面最初的可见高度,然后监听高度变化(resize),当新的高度小于原来的高度时,判断是键盘弹出键盘弹出时将tab栏隐藏起来实现效果代码如下,在全局(app.vue)添加mounted() { window.addEv原创 2021-10-02 23:15:08 · 3749 阅读 · 0 评论 -
vue中数组加Key
代码:const numberList = list.map(item => ({value: item}))其中 list是原数组,numberList是转化后的数组,value是key的名称在使用element的el-autocomplete远程搜索组件时,普通的数组不能匹配,需要带有可以的数组才可以。这是普通数组转化成key为value的数组:...原创 2020-04-09 17:37:49 · 3800 阅读 · 1 评论 -
VUE构建前后端分离的前端项目
VUE构建前后端分离的前端项目(超详细)1.使用vue-cli创建项目2.使用elementUI组件编写页面3.使用axios与后台交互4.使用webpack构建工具打包5.部署到Tomcat1.技术背景前后端分离的优势:分工明确,提高工作效率,前端主要关注页面、用户体验,后端主要关注业务、安全。性能提升,前端通过路由配置实现按需加载,后端无需解析前端页面。前后端同时开发,提升开发效率。发现BUG可以快速定位问题,代码的重构和可维护性强,降低维护成本。分离部署,静态资源由前端服原创 2020-08-26 23:26:18 · 10240 阅读 · 2 评论 -
解决自定义组件表单验证不能及时生效,提交的时候才生效的方法
问题:如图,内容已经填写,但是非空提示语还在,只有点击后面的确定按钮才会生效解决办法:在子组件的input事件添加手动校验,如果是远程查询组件的话还要在change事件添加手动校验:<el-form-item prop="policyNo" class="append-form-item"> <remote-search ref="appendPolicyNo" :result原创 2020-10-13 09:48:52 · 1934 阅读 · 0 评论 -
【vue3】VUE3初体验
VUE3初体验目录VUE3初体验(一)新特性1.setup2.ref3.reactive扩展4.computed属性5.watch函数6.watchEffect7.生命周期8.hook函数9.toRef和toRefs10.shallowRef和shallowReactive11.readonly和shallowReadonly12.roRow和markRow13.customRef14.响应式数据的判断(二)新组件1.Fragment(片段-多根节点)2.teleport(传送)3.Suspense(包裹原创 2021-08-30 11:07:07 · 779 阅读 · 0 评论 -
【个人笔记】解决vue使用ueditor上传图片没反应或不显示
1.定义全局变量,存放上传图片的接口地址比如可以创建一个config目录,在目录下创建一个api.js,定义全局变量并抛出export default { ueditorUploadUrl: (CONFIG.base || process.env.VUE_APP_BASE_API) + '/file/upload', // 富文本上传地址}2.修改单文件上传方法打开ueditor.all.js,找到单文件上传方法。1.先修改请求方法,大约在24572行,注释的是原来的代码代码:var原创 2021-07-16 18:44:44 · 3792 阅读 · 1 评论 -
【Mockjs】Vue中使用Mockjs,语法规范,常用方法
目录1.在Vue中使用Mockjs1.安装2.创建3.引入4.添加代码2.语法规范 - 数据模板定义1.数据模板介绍2.规则(1)'name|min-max': value(2)'name|count': value(3)'name|min-max.dmin-dmax': value(4)'name|min-max.dcount': value(5)'name|count.dmin-dmax': value(6)'name|count.dcount': value(7)'name|+step': value原创 2021-06-28 23:40:43 · 1406 阅读 · 5 评论 -
vue li快速定位功能
1.功能描述如图,监听输入框输入的内容,自动定位到第一个匹配的内容2.完整代码<template> <div> <el-input v-model="searchVal" placeholder="输入内容快速定位" class="anchor-input" clearable @input="searchValIpt" /> <div class="list"> <ul> <li v-原创 2021-03-29 16:45:48 · 612 阅读 · 0 评论 -
vue el-checkbox按下shift键实现批量选择数据
1.先看下效果2.代码分析1.添加html代码,先将列表写出来<el-button @click="checkAll(true)">全选</el-button> <el-button @click="checkAll(false)">全不选</el-button> <el-button @click="checkInvert">反选</el-button><el-checkbox-group v-model="se原创 2021-03-24 17:53:07 · 3286 阅读 · 0 评论 -
前端计算当天、本周、本月、本季、今年的起止日期
1.完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="btnClick(1)">今天</button> <input id="day"></input>原创 2020-11-18 17:43:30 · 1112 阅读 · 2 评论 -
解决element el-pagination分页最后一页数据清空了页码显示正确,但是列表为空
vue原创 2020-11-12 15:02:10 · 3154 阅读 · 2 评论 -
axios responseType: ‘blob‘下载文件,失败时转换成json
axios配置responseType: 'blob'时,接口返回成功的数据是正常的文件流,返回失败的时候也会以文件流的形式下载到本地,但是是一个损坏的文件。通过观察发现:有效的情况下返回的type是application/octet-stream,而失败的时候type是application/josn,那我们就根据这个条件对结果进行处理,对失败的结果转换成json,在页面给出错误提示。处理代码如下:正常的type为application/octet-stream时,就执行下载到本地的.原创 2020-09-11 17:06:59 · 4003 阅读 · 2 评论 -
vue根据后端菜单数据生成动态路由
动态路由初体验,存在不足,欢迎点评指正~前言:在之前的项目中,菜单是动态获取的,而路由是写死的,配置路由的时候只要保证路由的path与菜单的index(elementUI的el-menu组件)相同就可以实现路由跳转,只是菜单改了的话,路由也得相应修改,否则就会找不到页面。当时之所以没有研究动态路由是觉得跳转的页面是路由指定的,如果路由变成动态获取的话,前端的页面文件命名和目录结构都得根据后端的数据调整,也不是很灵活,但是…最近后端调整了数据,发现好多路由没有匹配到,都跳转到了一个重定向/redirect原创 2020-08-20 16:04:40 · 8694 阅读 · 34 评论 -
vue使用深拷贝进行表单清空
最近发现this.$refs[form].resetFields()这个方法并不能将表单清空,它只是把表单重置到初始值。我在实际项目中遇到的情况是:1.进入页面首先进行新增操作(表单初始是空值),则重置功能正常2.进入页面首先进行修改操作(表单默认回显要修改的数据),则在之后的操作执行this.$refs[form].resetFields(),表单的内容都是进入页面时回显的数据解决办法:1.在data里定义的表单初始数据是addForm: { centerName:原创 2020-08-17 10:16:42 · 961 阅读 · 0 评论 -
JAVA VUE前后端使用aes对用户名密码加密
加密后的数据格式:1.安装插件npm install crypto-js --save-dev2.创建相关建相关js文件:我是创建在util目录下,文件名为aes.jsaes.js添加代码:import CryptoJS from 'crypto-js/crypto-js'// 默认的 KEY 与 ivconst KEY = CryptoJS.enc.Utf8.parse('Dm123456') // ""中与后台一样 密码const IV = CryptoJS..原创 2020-06-09 09:48:44 · 1001 阅读 · 0 评论 -
plop-templates自动新建项目文件
前:我所使用的的框架是vue-element-admin,这个里面已经有很多功能了,不过是纯前端的,我用到项目中已经改得面目全非了,只保留了基本框架。1.今天突然发现目录中有个plop-template,之前没有注意到,baidu了一下才知道原来是自动创建项目文件用的。2.我之前创建新文件都是鼠标右键new一个vue文件,然后打vue,选择第一个生成一个最简单的模版,但是太简单了,vue的生命生命周期还得自己写。3.自己创建的工程项目是没有这个plop-template,添加方式:①在原创 2020-06-03 14:33:03 · 5157 阅读 · 1 评论 -
vue-cli3.0引入pdf.js,解决Uncaught SyntaxError: Unexpected token报错
pdf.js的引入是在将官网下载的包放到static目录,然后通过iframe引用的。但是vue-cli3.0没有static文件夹,下面详细介绍一下vue-cli3.0的引入方式1.下载包百度搜索pdfjs,或者点击链接http://mozilla.github.io/pdf.js/getting_started/#download 点击下载2.在public目录新建static文件夹,将下载的pdf包解压了放进去注意static文件夹不能创建在src统计目录,否则访问不到,会报错U.原创 2020-06-03 09:46:40 · 5970 阅读 · 11 评论 -
el-table设置默认选中报错_this.$refs.singleTable.toggleRowSelection is not a function
直接使用以下的方法,报错信息是_this.$refs.singleTable.toggleRowSelection is not a functionthis.$refs.singleTable.toggleRowSelection(item, true)看了网上的解决方法,加了this.$nextTick,代码如下,但还是报错Error in nextTick: "TypeErr...原创 2020-04-29 14:11:21 · 12940 阅读 · 6 评论 -
简单记录vue中axios的参数传递方式
1.get --不需要tokenconst data = { params: {参数}}axios.get(url, data)2.post --需要tokenconst data = {参数}axios.post(url, data, config)3.put --需要tokenconst data = {参数}axios.put(url, da...原创 2020-03-27 11:55:05 · 1496 阅读 · 0 评论 -
div+elementUI实现穿梭框
element-ui自带的穿梭框两边都是列表的格式,想要更多样式就自己造吧~思想是:点击“添加”数据从左边列表删除,插入到右边列表中,由于没有添加后台,刷新之后数据就恢复了,实际使用的时候得访问后台接口才行~完整代码在最后面。效果图:左边是一排按钮组成的列表,也可以用ul li实现,右边是el-table表格。1.布局:添加对话框,将对话框的body从左到右分成三部分&l...原创 2020-03-26 12:10:02 · 3122 阅读 · 4 评论 -
字符串数组转换为JSON数组unexpected end of JSON input
具体的报错信息原因: 要转换的字符串是空的或者为null,如图框内的都是转换失败的解决:转换签判断字符串是否为空,代码类似下图就解决啦~...原创 2020-02-23 23:13:04 · 838 阅读 · 0 评论 -
vue解决sockjs报错
打开node_modules -》sockjs_client -》 dist -》 sockjs.js找到1606行左右,将self.xhr.send(payload);注释掉一般开发的时候不要注释掉,打包的时候再注释,因为注释掉以后就不能热加载了...原创 2020-02-12 13:59:09 · 2115 阅读 · 0 评论 -
vue使用vue-pdf预览pdf文件,带有换页、缩放、选择功能
1.安装npm install --save vue-pdf2.在需要用的页面引入import pdf from 'vue-pdf'3.带有放大、缩小、换页功能的用例<template> <div class="page-container"> <div class="main"> <pdf ...原创 2020-01-17 15:23:32 · 7939 阅读 · 14 评论 -
vue超简单导出表格数据
此项目采用的组件库是elementUI1.添加一个点击事件<el-button @click="outTab">导出数据</el-button>2.调用方法,#out-table是表格的id代码outTab () { /* generate workbook object from table */ let wb = XLSX.util...原创 2019-12-27 17:17:53 · 2448 阅读 · 17 评论 -
el-pagination假分页表格数据的绑定方式
:data="tableData.slice((currentPage - 1)*pagesize, currentPage*pagesize)":data="tableData.slice((currentPage - 1)*pagesize, currentPage*pagesize)"原创 2019-12-23 10:13:10 · 1109 阅读 · 0 评论 -
vue element 添加遮罩层
el-dialog自带有遮罩层,但在:modal=“true” :modal-append-to-body=“true” 等设置都没有效果的情况下,考虑自己加一个遮罩层吧添加html,div里面可以添加文字或图片 <div v-if="showModal" class="mask"> <img class="loading-image" src="../../im...原创 2019-12-20 10:00:12 · 18043 阅读 · 0 评论 -
vue设置30分钟不进行任何操作跳转到登录页面
在App.vue添加代码<template> <div id="app" @mousemove="moveEvent" @click="moveEvent"> <router-view /> </div></template><script>export default { name: 'A...原创 2019-12-11 17:29:32 · 1598 阅读 · 0 评论 -
vue axios.get传递数组到后台的格式有四种
1.首先需要安装qs插件2.get请求传递的参数都是通过params的,所以应该是对params进行配置3.在get请求下面添加代码paramsSerializer: function(params) { return qs.stringify(params, {arrayFormat: 'brackets'})},4.其中arrayFormat: 'brackets...原创 2019-12-05 10:35:10 · 1400 阅读 · 0 评论 -
vue elementUI表单重置
网上的方法是this.$refs.editForm.resetFields()但是这个对于我来说没有效果于是我想到了修改功能的表单回显 this.editForm = Object.assign({}, row)同理可得,清空表单的方式是this.editForm = Object.assign({}, '')前提是数据格式是这样的:每个表单项都要有prop属性...原创 2019-11-25 10:16:35 · 1002 阅读 · 0 评论 -
原来。。表格数据量大的列表可以采用后端分页
在vue-element的项目中,我的方法一直是获取所有数据,用el-pagination组件进行分页,当数据量很大的时候渲染非常慢,这种方法叫假分页今天突然得知有后端分页方法就是这样,效果极好...原创 2019-11-22 11:07:03 · 378 阅读 · 1 评论 -
vue使用EventSource
前后端分离项目,vue通过EventSource监听后台数据,并添加声音提示完整代码(写在mounted):const that = thisif (typeof (EventSource) !== 'undefined') { var music = new Audio() music.src = require('@/assets/wav/notice-short....原创 2019-11-18 15:23:40 · 8302 阅读 · 1 评论 -
写在mounted里面的函数的data无法传出来
是需要在mounted里面const that = this然后用that代替this就行原创 2019-11-18 15:09:44 · 476 阅读 · 0 评论 -
el-form表单添加自定义验证
添加表单el-form必不可少的字段: :model、ref、:rules 还有表单项里的prop最后添加一个确定按钮和一个取消按钮,取消按钮的cancel功能是点击取消按钮及时清除验证信息在data() {}里面添加验证规则在data的return里面引用验证规则在确定按钮里面使用验证saveAdd: function() { thi...原创 2019-11-05 10:33:52 · 5094 阅读 · 0 评论 -
vue从后台下载.zip压缩包文件
vue前后端分离,使用element的el-button组件从后台下载文件,并且解决乱码问题1.添加下载按钮2.(原始方法,会出现乱码)给按钮添加点击事件,添加接口代码 download: function() { const row = this.tableRadio // console.log(row) axios.get('/api/...原创 2019-10-31 17:50:58 · 22814 阅读 · 36 评论 -
vue el-upload实现上传文件到后台的功能
vue 使用element-ui的el-upload实现上传文件到后台的功能1.添加el-upload控件<el-upload :action="action" :file-list="modeList" :http-request="modeUpload"> <el-button size="small" type="primary...原创 2019-10-30 18:30:49 · 24128 阅读 · 13 评论 -
vue-cli3.0项目打包后修改访问后端地址
问题:原本是将访问后台的地址卸载代码里面,但是这样的话打包之后就不能修改了,只能在代码里面修改,然后重新打包解决:在vue3.0之前的版本,项目目录有static不会被打包,而在vue3.0项目目录没有static文件夹,但是有public文件夹是不会被打包,所以在public目录下创建一个js文件,命名为config.js在里面添加代码, 定义BASE_URL为要访问后台接口的...原创 2019-10-25 15:54:18 · 7634 阅读 · 7 评论 -
Vue项目打包部署到Tomcat以及刷新404问题
Vue项目打包部署到Tomcat以及刷新404问题vue项目使用命令进行打包npm run build:prod打包完成后生成dist文件夹,里面包含static文件夹(主要是css、js静态文件)和index.html将dist里面的文件复制到tomcat下面的webapp文件夹里面的ROOT文件夹启动tomcat,打开index.html文件,将访问路径改成“localh...原创 2019-10-24 17:08:30 · 1352 阅读 · 0 评论