vue2.0
文章平均质量分 50
口袋の的天空
这个作者很懒,什么都没留下…
展开
-
vue-router的base和vue.config.js的publicPath区别和联系
如果要加前缀,三者要保持一致。vue-router的base官方文档解释:vue.config.js的publicPath官方文档解释:publicPath是控制静态资源访问路径。router的base是控制路由跳转前缀。nginx是控制静态资源放在服务器的位置,反向代理。history模式下,配置路由基准路径为app,vue.config.js配置文件的publicPath ‘./’时,一定要设置vue-router的base配置 文档参考:vue(1)-配置(1)publicp转载 2022-06-10 18:11:57 · 3079 阅读 · 0 评论 -
直接打开网址可以跳转,通过window.open报错404
一.遇到的问题:直接在浏览器输入网址是可以打开的,但是从项目里跳转就不行。浏览器直接输入网址的http请求信息:项目里跳转的http请求信息二.问题原因从浏览器直接输入是没有referer的,从项目里跳转会带上项目的地址作为referer所以可能要跳转的服务器对referer进行了拦截。三.解决方案方法一第一种方法在谷歌浏览器有效,我在火狐上测试无效。window.open('javascript:window.name;', '<script>location.repl转载 2022-05-06 17:41:06 · 4110 阅读 · 2 评论 -
vuedraggable的使用
官网地址:https://www.npmjs.com/package/vuedraggableDraggable为基于Sortable.js的vue组件,用以实现拖拽功能。一.安装npm i -S vuedraggable或者引入:二.使用1.场景:单个列表内部简单的拖拽(不克隆)<template> <div class="twoPage"> <draggable :list="list" :disabled="!enabled原创 2022-04-27 17:11:04 · 8564 阅读 · 0 评论 -
el-form表单label添加icon提示和必填校验
像下面这样,表单前面必填校验,再在label前面添加Icon 提示悬浮文字。如何实现呢?如下:el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签原创 2022-04-23 22:32:19 · 5341 阅读 · 0 评论 -
vue中如何引入自动引入所有svg图标
一.前提1.要使用 svg 先安装对应的 loadernpm install svg-sprite-loader注意:如果按照下面配置正确发现svg依然无法显示可能s’v’g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)2.webpack.base.conf.js修改 { test: /\.svg$/, load原创 2022-04-20 15:48:09 · 2570 阅读 · 0 评论 -
vue中的Input输入框里面插入tree树
使用的是vue-treeselect一个多选组件,具有对 Vue.js嵌套选项支持.支持嵌套选项的单选和多选模糊匹配异步搜索延迟加载(仅在需要时加载深度选项的数据)一.安装npm install --save @riophae/vue-treeselect或者引入: <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js">转载 2022-04-18 14:20:00 · 1633 阅读 · 0 评论 -
elementui的导航路由递归报错解决
menu.vue - 父组件:<template> <div class="menu"> <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#0f2c70" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="handleSelect">原创 2022-04-17 20:57:18 · 813 阅读 · 0 评论 -
core-js/modules/es.error.cause.js 报错
当前core-js@2已经放弃维护了,所以要装3以上的版本。目前我用的是3.19.1我启动的时候出现的问题为This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel/runtime/helpers/createForOfIteratorHelper.js, ./src/directive/permission/hasPermi.js and 5 others To ins转载 2022-04-13 17:57:27 · 2765 阅读 · 3 评论 -
get请求数组参数问题(序列化)
问题:当我们需要通过get方式传递一个数组作为参数 tag:[1,2,3,4]预期是解析为:https://www.cnblogs.com/enter?tag=1&tag=2&tag=3&tag=4然而真相是这样的:https://www.cnblogs.com/enter?tag[]=1&tag[]=2&tag[]=3&tag[]=4,后台是不可能解析到传递的参数。解决方法1、qs插件处理1、qs.stringify({ a: ['b', 'c'转载 2022-04-12 15:30:58 · 2763 阅读 · 0 评论 -
element UI-表格数据转换
第一种方法:使用formatter方法比如说:表格中的比例按照百分比显示,还是带 % 的这种,但是后端只是返回了一个 0-100 的数值,就需要前端自己做转换html:<af-table-column prop="XX" label="XX比例" :formatter="XXFormat" align="center"></af-table-column>XXFormat (row, column, cellValue, index) { return cel原创 2022-04-12 14:20:06 · 3016 阅读 · 0 评论 -
axios中http请求Content-Type以及post需要用qs.stringify而get请求时不用
一.前端向后端传输数据的方式1.前端向后端传输数据时,有get和post两种:如果是get传输,直接传在url后;如果是post传输,则在请求体body中传输。2.在body中的数据格式又有两种:一种是 json 数据格式,另一种是 字符串。具体要用哪种格式取决于后端入参的格式如果后端接收json数据类型,post 的 headers 需要设置 { ‘content-type’: ’application/json’ },传给后端的数据就形如 { ‘name’:’edward’, ‘age转载 2022-04-07 15:52:09 · 817 阅读 · 0 评论 -
二进制流图片在前端页面展示的问题
问题:调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。解决:1、先设置axios接收参数格式为"arraybuffer":responseType:'arraybuffer'2、转换为base64格式图片数据在img标签显示:return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCh原创 2022-04-07 15:13:25 · 2985 阅读 · 0 评论 -
RSA非对称加密传输---前端加密&解密(VUE项目)
一.什么是RSA非对称加密实际开发过程中,后台生成一对公私钥,私钥存在服务器,把公钥给前端,前端加密后传给后端,这是相对比较安全的做法。就好像是:由后台B生成一对公钥和私钥存好,公钥就好比一把锁,钥匙就是私钥。后台B只需要把锁给前台A,前台A把那句话锁起来,交还给后台B,在这过程中,即使大家都能在浏览器看到前台A传过来的公钥(锁),但不知道那句话是啥的,然后B拿到锁好的机密,拿只有自己才有的私钥(钥匙)解开,这个差不多就是非对称加密。二.使用jsencrypt.js官网:http://travis转载 2022-04-07 10:44:13 · 1496 阅读 · 0 评论 -
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法:第一种方法:npm安装包animate.css和wow.js第二种方法:静态资源的引入第一种方法:1.引入静态资源包静态资源包,需要注意的是。必须放到static文件夹下面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"原创 2022-03-11 18:18:07 · 5075 阅读 · 2 评论 -
vue2.0的搭建脚手架,安装axios,less
1.下载并安装node.js2. 查询node和npm是否安装成功:①查询当前node的版本号(node版本要在6.9以上)在官网安装下载就可以了②查询当前npm的版本号(npm的版本要在3.10以上)直接输入:npm install就可以安装了3. 设置淘宝镜像路径:npm config set registry=https://registry.npm.taobao.org/npm config list //查看所有的config变量4原创 2021-08-17 17:40:17 · 2015 阅读 · 0 评论 -
移动端真机调试神器vconsole
移动端真机调试神器vconsole一.安装// 终端上输入npm i vconsole -S二.mian.js引入// main.jsimport Vconsole from 'vconsole'const vConsole = new Vconsole()Vue.use(vConsole)三.页面显示在需要的地方打印console.log()原创 2021-06-27 00:03:48 · 158 阅读 · 0 评论 -
elementUI轮播(Carousel)自适应
elementUI轮播(Carousel)自适应需求:图片要求宽度100%,高度不能限制死,要求高度自适应。但这边的问题就是Carousel的高度默认是300px,图片能随着宽度的改变而改变,但Carousel无法改变。<template> <div class="three"> <el-carousel arrow="always" :height="bannerHeight+'px'"> <el-carousel-item v原创 2021-06-17 18:13:30 · 1425 阅读 · 0 评论 -
H5调起手机端的摄像头
H5调起手机端的摄像头这里主要是用input的capture属性。capture表示,可以捕获到系统默认的设备,比如:camera照相机;camcorder摄像机;microphone录音。accept表示,直接打开系统文件目录。<label> 照相机: <input type="file" id='image' accept="image/*" capture='camera' multiple></label><label> 摄像机: &转载 2021-06-16 10:31:03 · 7964 阅读 · 0 评论 -
vue中组件name的作用
vue中组件name的作用转载:https://blog.csdn.net/Uookic/article/details/80420472我们在写vue项目的时候会遇到给组件命名这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 export default { name:'xxx'}1.当项目使用keep-alive时,可搭配组件name进行缓存过滤举个例子:我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载e转载 2021-05-31 17:43:03 · 479 阅读 · 0 评论 -
QRCode.js:使用 JavaScript 生成二维码(vue中使用)
QRCode.js:使用 JavaScript 生成二维码(vue中使用)一.什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。二.基本用法1.安装npm i qrcodejs22.小demo<template> <div class="three"> <div ref="qrcode" class="code"&原创 2021-05-31 16:19:28 · 345 阅读 · 1 评论 -
html导出pdf(vue中可用)
html导出pdf(vue中可用)1、插件安装npm install html2canvas --save npm install jspdf --save<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>2、注册一个全局可用的导出方法// 导出页面为PDF格式import html2canvas from 'html2canvas'export default {转载 2021-05-26 17:12:04 · 309 阅读 · 0 评论 -
Vue项目打包后dist文件目录详解
Vue项目打包后dist文件目录详解css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候,会把所有的css样式打包到这里css文件夹下的.css.map文件是一个Source map文件,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码,只是方便我们开发的时候做调试使用。js文件夹下的.js.map依然是Source map文件,方便我们开发时调试js代码使用。转载 2021-05-25 16:31:07 · 3191 阅读 · 0 评论 -
vue的插件_nprogress
一.nprogress进度条1.安装:npm install --save nprogress直接引入js、css或者通过cdn引入。<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>2.使用直接调用 start()或者done()来控制进度条。NProgress.start();NProgress.done();这个可以在router转载 2021-05-18 15:39:11 · 135 阅读 · 0 评论 -
vue组件的路由高亮问题
vue组件的路由高亮问题之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active。后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是将这个问题的解决办法。第一种是通过这样的添加类:.router{ font: 12px/40px '微软雅黑'; background: pink; background: pink; color: white; cursor: po原创 2021-05-10 18:00:42 · 769 阅读 · 2 评论 -
elementui的upload必传检验
elementui的upload必传检验el-upload在rules里面绑定的不是fileList,而是ref的值<template> <div class="box"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini"> <el-form-item label="数原创 2021-02-18 22:05:04 · 1799 阅读 · 0 评论 -
elementui固定表格头部
elementui固定表格头部el-table的高度超出页面,头部固定,下面滚动,设置height=“calc(‘100% - 48px’)”<template> <div class="box"> <div class="searchBox"> </div> <div class="gap"></div> <div class="tableBox"> <el-ta原创 2021-02-18 21:32:27 · 6873 阅读 · 0 评论 -
vue数据变化但页面刷新
vue数据变化但页面刷新1.watch监听到数据的变化但页面没有刷新在数据改动的代码后加 this.$forceUpdate();添加this.$forceUpdate();进行强制渲染,效果实现。因为数据层次太多,render函数没有自动更新,需手动强制刷新。2.没有监听到数据的变化例如:改变了数组中的某一项或者改变了对象中的某个元素时,监听则未生效。数组若要触发监听,下面方法即可触发如:splice(),push() 等js方法当然了,也可以使用vue中的方法 this.$set(ob原创 2021-02-06 12:59:08 · 2427 阅读 · 0 评论 -
elementui的tree默认高亮显示无效的问题
elementui的tree默认高亮显示无效的问题必须要的属性:1, 设置node-key 属性2, 使用nextTick3, 设置 highlight-current 属性4, this.$refs.xxx.setCurrentKey(‘id名称’)示例:<template> <div class="onlineText"> <el-tree :data="data" :props="defaultProps" @node-click="handle原创 2021-02-01 23:09:05 · 3195 阅读 · 0 评论 -
vue滑动验证插件
vue滑动验证插件资源里面有需要引入的文件<template> <div class="captcha-wrap"> <div id="captcha-dom" class="nc-container"></div> </div></template><script>import "./captcha.js";export default { name: "Captcha"原创 2021-02-01 22:34:12 · 685 阅读 · 1 评论 -
vue中captcha.js生成验证码
vue中captcha.js生成验证码转载来自于:链接一.本地引入1.下载:git clone https://github.com/saucxs/captcha.git2.下载到本地以后引入:<script type="text/javascript" src="./captcha.js"></script>3.容器:<canvas width="240" height="90" id="captcha1"></canvas>4.js原创 2021-01-31 15:54:02 · 1797 阅读 · 0 评论 -
vue2.0中debugger调试this为undefined,但打印有值的问题
vue2.0中debugger调试this为undefined,但打印有值的问题文件出自:链接原因:1.箭头函数内的 this 和封闭的局部变量一样2.箭头函数内的 this 被babel 打包后重命名了解决:安装插件npm i babel-plugin-transform-es2015-arrow-functions --save-dev然后在.babelrc或者是babel.config.js 配置文件中加入plugins: [["transform-es2015-arrow-fun原创 2021-01-30 23:01:53 · 1942 阅读 · 0 评论 -
vue中引入.svg图标,使用iconfont图标库
vue中引入.svg图标,使用iconfont图标库阿里巴巴的iconfont是一个很好的图标库创建SvgIcon组件<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script>export default { name: '原创 2020-08-21 23:06:54 · 912 阅读 · 1 评论 -
vue中通过identify插件生成图片验证码
vue整合identify(生成图片验证码)插件identify简介这是一个vue的插件,使用canvas来生成图形验证码具体参数如下:在src\components\identify目录下创建identify.vue文件(主要用于定义参数和方法)内容如下:<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="con原创 2020-08-21 23:39:29 · 269 阅读 · 0 评论 -
vue中改变滚动条的样式
vue中改变滚动条的样式element-ui的滚动条组件 el-scrollbar1.比如说下面的这个样式html部分:<div style="margin:30px;"> <ul style="width:500px;height:50px;overflow:auto;white-space:nowrap"> <li v-for="(item,index) in list" :key="index" style="width:20px;height:原创 2020-08-29 10:32:03 · 413 阅读 · 0 评论 -
登录界面记住密码的功能
登录界面记住密码的功能这里是用localStorage来实现功能的,第一次登陆的时候记住用户名和密码还有当前的时间戳,然后下一次登录的时候就把此时的时间戳和上一次的相减。把这个差值和时间段的毫秒进行比较。代码如下:html:<div style="width:500px;height:500px"> <el-form label-width="80px" :model="ruleForm"> <el-form-item label="账号"&原创 2020-08-29 11:24:13 · 1647 阅读 · 0 评论 -
如何用递归写element-ui的导航菜单
如何用递归写element-ui的导航菜单1.准备数据:在main.vue组件准备好数据data(){ return{ isCollapse: false, menuList:{ "code": 200, "message": "操作成功", "data": [ { "createdBy": null, "createdDate": null, "update原创 2020-08-30 00:33:19 · 826 阅读 · 0 评论 -
如何修改Svg的颜色
如何修改Svg的颜色有两种方法:1.如果svg已经下载好了,那怎样弄才能修改颜色呢?去掉这两部分2.如果这样嫌麻烦,而且svg还没下载,那怎样避免修改呢?1)选中一个图标,加入购物车2)添加至项目3)“批量操作” ->“批量去色”就可以啦...原创 2020-08-30 00:41:47 · 10596 阅读 · 0 评论 -
用vue的elementui侧边栏写二级和三级路由
用vue的elementui侧边栏写二级和三级路由有一种情况路由下的路径和名称是后端返回,前端可配置的像这样: menuList:[ { "createdBy": null, "createdDate": null, "updatedBy": null, "updatedDate": null, "id": "1", "name": "首页",原创 2020-09-05 18:43:18 · 2870 阅读 · 1 评论 -
vuex
vuex什么是vuex?Vuex 是专门为 Vue.js 设计的状态管理库,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex核心概念成员列表:state、getters、mutations、actions、modules。state 存放状态mutations state成员操作getters 加工state成员给外界actions 异步操作modules 模块化状态管理1、state:vuex的基本数据,用来存储变量2、getter:原创 2020-09-06 00:59:09 · 501 阅读 · 0 评论 -
axios的安装和使用
axios的安装和使用安装npm install axios引入在main.js中引入或者在封装的js里引入import Axios from 'axios'Vue.prototype.$axios=Axios使用get请求下面两种都可以:// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(func原创 2020-09-06 21:09:23 · 4030 阅读 · 1 评论