- 博客(90)
- 收藏
- 关注
RSS订阅原创 复制项目到自己电脑npm run dev报错
最近发生一件很奇怪的事情，我同时复制两个项目在同一文件夹下，一个项目可正常运行另一个项目则有千奇百怪的错误，下面来总结一下复制到自己电脑无法正常运行的解决方法（自己亲测有效）1.我只要用npm安装所有的模块都进行报错我安装了cnpm首先输入npm config get proxynpm config get https-proxy确保两个值都为null如果不为null操作下一步npm config set proxy nullnpm config set https-proxy nul
2022-03-30 14:16:43
809
原创 vue-admin-template侧边栏二级菜单只有一个时父级菜单不显示的问题
最近进行项目收尾阶段，突然发现当侧边栏菜单只有一个二级菜单时一级菜单消失网上搜了很多办法，修改Sidebar中的index.vue中的el-menu，将:unique-opened="true"改为true并给item上加上唯一的index，发现不生效，各种尝试后发现在permission.js中修改，代码如下：function filterAsyncRouter(asyncRouterMap) { const accessedRouters = asyncRouterMap.filter(rou
2021-12-30 16:06:37
5516
4
原创 vue中根据路由from不同展示同一个页面搜索条件不同
项目要求：从一个页面的按钮跳转页面，该页面搜索条件变化，不从按钮进入搜索条件变成另一种同一个页面同一个路由不同的展示条件思路：假入从a页面的按钮调到b页面那么展示第二张图，如果不通过a页面按钮进入b页面展示第一张图，搜索条件写了两个用v-show显示第一张图，a页面点击按钮的时候this.router.push(′/b′)并在按钮注册的事件中用sessionStorage.setItem(′forma′,′a′)做个标记，现在跳入b页面，对b页面搜索条件进行控制，首先在created中获得sessi
2021-02-03 17:28:01
694
1
原创 watch监听动态隐藏显示el-table列
实现效果是根据弹框的多选控制table列的显示隐藏默认全部选中，就是table全部显示，取消选择table列进行隐藏下面是详细代码el-table <el-table :data="tableData" border stripe :header-cell-style="tableHeaderColor" style="width: 100%; margin-top:2%;margin-left:0%" ref="tab
2021-02-02 17:36:10
870
原创 el-table找那个使用el-input-number
最近使用el-table中需要计数，但是发现加上elementUI官网的代码发现只能触发一次，下面是解决办法，实用 <el-table-column label="数量" prop="count" > <template scope="scope"> <el-input-number v-model="scope.row.count" controls-position="right"
2021-01-18 09:58:56
1820
2
原创 el-tree控制权限问题
最近在做后台管理系统权限问题是肯定会遇到的，下面我来分享下我用el-tree的心得，我们的需求是需要以数组的形式传递，二级菜单对应的三级菜单在一个对象中，如果有多个就一个数组中多个对象，传递的形式[{"menuTwoId":"20001","queryHandle":true,"searchHandle":true,"partnerData":true},{"menuTwoId":"20003","queryHandle":true,"addHandle":true}]下面先看代码<el-di
2021-01-12 17:39:13
660
原创 el-table表头添加按钮
:render-header=“renderHeader” 为主要代码 <el-table-column prop="goodsplace" label="仓库" width="120" :render-header="renderHeader" //主要代码 > <template slot-scope="scope"> <el-se.
2020-12-11 16:02:00
8471
5
原创 el-elementUI使用el-date-picker，选择年，选择月
vue中使用el-date-picker选择年 <el-date-picker v-model="gysForm.year" type="year" placeholder="选择日期" format="yyyy" value-format="yyyy" style="width: 100%;" :picker-options=
2020-12-07 14:31:41
19144
1
原创 el-dialog中使用走马灯放大图片模糊
最近遇到个奇葩的问题，在el-dailog中使用el-carousel里面的图片打开是模糊的，找了很久的原因发现el-carousel-item设置了transform属性，就从这里下手//原来的代码transform: translateX(0px) scale(1);//即使scale为1但图片还是模糊，在网上找了很多解决方法，发现下面的办法是最有效的，图片瞬间清晰//新代码/deep/ .el-carousel__item.is-animating { transform: tra
2020-12-07 13:59:20
509
原创 vue返回上一页不刷新页面
项目需求：由于公司产品较多页面加载相对慢，所以每次进行页面的刷新影响客户下单的效率。1.首先对router.js进行操作import indexOne from '@/components/indexOne' { path: '/indexOne', name: 'indexOne', component: indexOne, link: '/indexOne', meta: { keepAlive: true // 需要缓存 } },
2020-11-20 16:26:02
4733
原创 vue中input输入实时筛选el-option的内容
上方输入下面的输入框自动检索自动匹配（下面的下拉框是接口数据），下面直接进行上代码 <el-select v-model="form.name" size='mini' placeholder="请选择" > <el-input size="mini" style="padding:5%" v-model="inputXie" @input="focusCustomer()" .
2020-11-05 17:58:17
2183
原创 js筛选出相同的key
//将代码变成下面的代码let namelist = [{ name: 'mark', age: 15, hair: 'long'}, { name: 'tuwen', age: 16, hair: 'short'}, { name: 'lilei', age: 15, hair: 'short'}]//要变成的代码格式arr_1 = [{ name: 'mark', age: 15, hair: 'long'}, { name: 'li
2020-10-13 16:22:07
1021
原创 原生js获取元素并设置样式
下面我是通过class获取元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /&
2020-09-25 10:17:15
3436
原创 vue中写炫酷倒计时效果
<template> <div class="all"> <h1 ref="animate" :class="isTrue?'animate':''" >{{number}}</h1> </div></template><script>/* eslint-disable */// import $ from 'jquery'export default { d.
2020-09-14 15:02:53
915
原创 error in ./static/img/warehouse2.jpg Module build failed: Error: Cannot find module ‘imagemin-png
最近启动项目突然进行报错 error in ./node_modules/vue-piczoom/src/rotate.pngModule build failed: Error: Cannot find module 'imagemin-pngquant' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15) at Function.Module._load (internal/mod
2020-08-21 17:16:54
2175
原创 elementUI关闭模态框清除表单数据及上传的图片
下面写个小demo<template> <div> <el-dialog :visible.sync="dialogBackFormVisible" @close="backGoodss('ruleForm')" > <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules"
2020-08-18 10:39:44
1449
原创 vue中使用filter进行数组去重
下面看代码<template> <div> {{arr1}} </div></template><script>export default { data () { return { arr: [1, 2, 3, 4, 5, 2, 4, 1], arr1: [] } }, created () { this.quChong(this.arr) }, m..
2020-08-17 17:36:04
2075
原创 前端解决跨域问题
脚手架2.0搭建项目进行的操作首先找到config.js proxyTable: { '/myapi': { target: 'https://baidi.com', //要访问的地址 pathRewrite: { '^/myapi': '' }, // 设置https secure: false, // 必须设置该项 changeOrigin: true } },使用
2020-08-13 14:15:12
152
原创 vue2.0安装less
一般进行项目书写都要进行less的安装npm install less less-loader --save然后在build中的webpack.base.conf.js的rules添加 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }运行项目但是还是进行报错，分析原因可能是下载的版本过高了//删除原本安装的npm uninstall less-loader//进行特定版本的安装npm
2020-08-06 14:06:40
2677
原创 前端与vue结合使用的框架介绍
最近上网查发现很多人说elementUI不进行维护，于是我进入elementUI的githup地址上看了一下最后一次提交距离现在已经两个多月而且今年几乎没进行上传，于是我感到后背一凉刚用熟练的东西要换了吗，于是上网搜了几个最近还在更新维护的框架1.iview适用于PC端http://v1.iviewui.com/docs/guide/install2.MUI适用于移动端https://dev.dcloud.net.cn/mui/3.同时适用于移动端的vuxhttps://doc.vux.li/z
2020-07-29 16:12:01
421
原创 前端随机生成验证码
很多时候前端需要短信获取验证码或者是随机生成的数字和字母的验证码，今天讲一下随机生成的验证码的实现方式这是效果，下面是代码展示<el-form-item label="验证码" prop="code" class="codeGet"> <el-input v-model="ruleForma.code" /></el-form-item><div class="authimg authimg1" @click="cl
2020-07-27 15:12:42
1664
原创 前端动态的绑定img的src属性以及动态的绑定a标签的href属性
动态的绑定src//进行了拼接${id}在data中有声明id:'' <img v-show="isShowimg" style="height:100%" :src="(`/SubmitSalesOrder/previewImg?orderId=${id}`)" >动态的绑定a标签的href属性//html<a style="color:#409EFF" :href="downloadImg" download="图片">下载图
2020-07-23 14:44:50
918
原创 简单设置el-date-picker的默认当前时间
这是显示当前时间，每次点开弹框都是当前的时间实现效果很简单//html<el-form-item label="创建时间" :label-width="formLabelWidth"> <el-date-picker v-model="addForm.createDate" style="width:100%" type="datetime" placeholder="选择日期" /></el-form-ite.
2020-07-20 15:49:10
33998
3
原创 v-if判断el-table中按钮的显示与隐藏
一般情况下前端在做表格是时候会有状态的显示，下面是我的一个小demo状态是根据后台返回值显示不同的按钮下面是代码 <el-table-column prop="orderStatus" label="状态" width="120" > <template slot-scope="scope"> <el-button v-if="scope.row.or
2020-07-17 09:59:02
7267
原创 前端对图片流进行图片显示
之前做的得到图片的的数据一般是个拼接地址，今天遇到个神奇的跟大家分享一下上网查了很多图片流转成图片显示但是都没有成功，下面给大家介绍个简单的快速的方法直接在src中写地址，举个例子这是最简单的显示图片的方法，希望对你有帮助...
2020-07-16 11:55:58
2814
2
原创 vue前端向后端传值去除空字符串
之前我都是当客户不传值是传空字符串给后端，但是今天后盾跟我说用的是精确查询不必要的空字符串不要传过去，下面就进行探索const params = {} if (this.formInline.password) { params.password= this.formInline.password } if (this.formInline.name) { params.name = this.formInline.name
2020-07-09 11:46:57
2791
原创 注释Vue中所有的console.log
在前端开发的过程中一般会打印很多的日志但是要发布到线上的时候不希望客户看到其他的信息，但是一个一个的注释太麻烦也不利于以后进行更新下面是个很简单的方法一行代码解决在main.js中加入以下一行代码console.log = function() {}如果要进行修改代码进行打印日志查看的时候就把这行代码注释就OK~...
2020-07-06 15:57:50
1077
3
原创 在vue中提取公共方法
首先在utils中创建js写公共的方法下面是我的一个简单的例子top.js是我创建的js方法下面是top.js的代码const open = function() { console.log(1)}export { open }下面是main.js中引入代码如下import { open } from './utils/top'Vue.prototype.open = open最重要的是你要进行触发方法的地方要注册事件这样就可以进行正常的操作了...
2020-06-18 11:49:58
1244
原创 在vue中添加网站前面的小图标
每个人的需求不相同所以可以自己进行图标的操作，下面是我操作的步骤我在阿里矢量图中找到自己合适的图标https://www.iconfont.cn/加入购物车点开购物车结果如下点击下载素材选择png下面就可以进行.ico的转化我用的是比特虫http://www.bitbug.net/按操作进行.ico转化然后在根目录的index.html中link引入<link rel="icon" href="20200616134801_97948_32 (1).ico" /> 酱紫
2020-06-16 14:41:55
751
原创 el-table修改某列的颜色和行的样式与原生js设置某行的颜色
想要修改某一列的颜色效果如上，下面直接上代码<template> <div> <el-table :data="tableData" style="width:90%;margin-left:5%;margin-top:2%" border :cell-style="changeCellStyle" > <el-table-column prop="date" .
2020-06-12 13:46:20
7086
2
原创 原生js写table点击表头按钮进行排序
最近在对之前的项目进行功能增加又因为是老项目所以用的是js和jquery项目的需要是点击表头的按钮进行排序按钮是在阿里矢量图中找的点击上箭头升序排列点击下箭头降序下面是整理的代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-
2020-06-11 14:58:46
2324
原创 el-dialog中使用el-dialog或者el-dialog中使用el-upload中图片层级不够
今天遇到一个问题就是编辑弹框中可上传图片，但是发现图片放大层级不够搜了很多资料最后发现只是加一句话的事只需要在里面的el-dialog中加入append-to-body即可完事~
2020-06-09 16:04:27
1528
原创 node启动项目报错throw er
今天运行项目发现项目运行出错主要的原因是本机的端口和设置的不一致解决办法：在config文件夹下的index.js中更改ip把host改为localhost便可启动项目
2020-05-21 09:23:30
458
原创 前端将项目部署在nginx
最近写了一个小的移动端的项目，需要进行手机上测试，下面就需要前端自己将项目进行部署1.进行Nginx的下载（尽量下载稳定版）进行解压完成之后如上图，双击nginx.exe（在网上搜了很多说双击闪退是开启了）打开html文件夹如下图把打包好的dist文件放入html文件夹如下图进行最重要的一步配置nginx.conf文件最重要的部分location /dist { root E:/work/nginx-1.18.0/html; //根据自己的文件位置
2020-05-14 15:38:15
2661
原创 前端提高首屏加载的速度
很多网页首屏加载速度很慢我下面用了一些处理方法供大家参考1.使用路由的懒加载//咱们平时在router.js中引入各个组件方式import newIndex from '@/components/newIndex'import newRole from '@/components/newRole'//下面进行路由的懒加载const newIndex = () => import(...
2020-05-08 10:29:53
1292
原创 Git创建分支合并分支以及删除分支
今天进行git分支的命令的学习//查看分支git branch //在没任何创建时只有master分支//创建分支git branch login //创建login分支但是想要在login上进行开发需要进行分支切换此时查看分支还在master上下面进行分支切换git checkout login //分支此时切换到login分支用git branch进行查看小星星在login上...
2020-04-23 18:04:03
159
原创 Mint UI 中 MessageBox的用法
移动端运用Mint UI使用较为方便下面说一下MessageBox的用法1.进行安装Mint UInpm i mint-ui --save2.main.js中引入import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)3.要使用MessageBox的页面引入import { Messag...
2020-04-23 14:14:16
593
1
原创 把一个数组中的小数分离出
这里主要是针对判断小数下面是个小demo var arr = [1, 2, 3, 4, 5.533, 1.2, 2.5, 4] var y = /.*\..*/ var res = '' arr.forEach(item => { //判断是否为小数，小数位true this.res = this.y.test(ite...
2020-04-16 15:50:22
220
原创 el-table排序使某些数据不参与排序
排序前端也经常做，以前都做的是很简单排序，所有的数据参与排序，直接用插件封装的就行，但是这次是一些数据不参与排序所以这时候就需要进行自定义的设置思路：首先分成两个数组，一个数组的数据参与排序另一组数据不参与排序，将不参与排序的数据追加到排序的数组后面代码解析:<el-table height="480" ref="table" @row-dblclick="dataBack...
2020-04-16 10:29:10
2825
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人