GreyCastle的博客

原创 ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties

前言:今天重启项目的时候，突然出现了这个错误，节前还是好的，过了几天假期，程序自己死机了？不应该啊，耐心的找了找问题，看了下自己的配置，突然注意到节前我配置打包时加了个东西，把这个东西放错位置了，很是尴尬。配置错了，错误就出现了下面的结果...

原创 vue刷新当前页面或者当前组件

前言：很多时候我们会遇到页面刷新，传统的刷新会使页面一片白，带来很不好的体验，vue中为我们提供了一个provide和inject，可以在项目中巧妙的使用。使用步骤：①：router-view挂载②：在router-view所在组件中写上如下代码③：在其他组件中调用完毕！...

原创 父组件向子组件传值（静态文件里的变量）绑定不到form表单

前言：今天在封装弹框组件的时候，遇到了一个坑，做了新增，查看，修改三个功能，就想把它封装成一个组件，以方便以后使用。下面看截图，跟更清楚。添加功能的效果图（效果图举例）：下面说下问题：就是我点击确定的时候，本应该让我填写的数据获取到，可得到的却是为空的对象。渲染是问题的，就是你拿不到填写数据，，但是如果在父组件的mounted中将传递子组件的数据加载就可以，但是这样就不是动态传值了，封装也没意义了。给你们看下我解决办法：就一个给子组件加上条件渲染v-if因为父组件加载的时候子

原创 vue/cli 3版本 打包去掉soucemap文件

前言：一般正常打包会出现下面的这么多文件，其实生产环境下我们不要的那个 js.map文件的，这次就遇到客户上传Map文件过大，必须去掉Map文件解决办法：productionSourceMap: false; // 在vue.config.js文件中加上这个就可以了截图：...

原创 element-ui中Dropdown下拉菜单触发点击的2种使用方法

原创 设置el-progress渐变背景色

前言：前天做个修改element-ui背景色的需求，要改成渐变色，看了看官方文档也没提供这个属性，这我就头大了，查询了好多资料，才知道，修改成渐变的要修改原生的代码。因为element-ui中的环形进度条使用的svg,想要修改背景色，需要修改svg中path的sth的stroke属性。步骤：①：拷贝代码，在官方解析的代码中添加defs标签，id为blue②：修改path中的stroke的值stroke="url(#blue)"。具体介绍如下：先来看下未修改环形进度条的效果和使用el-

原创 七夕奉上，拿走不谢：vue router.beforeEach() 出现死循环解决方案（Maximum call stack size exceeded）

前言：今天做vue路由遇到了一个问题，想了好久。经过不断的查资料和分析代码终于解决了。先展示下报错：意思就是堆栈满了，溢出了。分析原因之前先了解下next()和next('xxxx')看完这个你就会恍然大悟next()表示路由成功，直接进入to路由，不会再次调用router.beforeEach()next('/login')表示路由拦截成功，重定向至login，会再次调用router.beforeEach()再看代码：看完后不明白，可能兄弟你要喝点六个核桃，哈哈！ro..

原创 vue中nextTick的用法

什么是nextTick：官方文档介绍：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。说白了就是在数据变化后立即进行获取或者操作dom（此时dom还未渲染）vue的Dom更新是有一定的策略的。当你操作数据发生改变了，虽然vue是数据驱动dom改变，但是你当前的数据改变了，它并不会立即执行更新dom操作，而是等该事件中所有的数据都改变的才会去执行操作，所以更改了一个数据然后立即对该数据绑定的dom操作，可能是得不到想要的结果，而nextTick就

转载 15个前端攻城狮必备的学习网站

链接：https://chocolate.blog.csdn.net/article/details/105252311

原创 element-ui 日期选择控件提交数据少一天

解决办法：在控件加一个：value-format="yyyy-MM-dd" 就可以解决<el-date-picker type="date" value-format="yyyy-MM-dd" v-model="date" style="width: 100%;"></el-date-picker>

原创 Vue中this.$set的使用

一、什么是this.$set，实现了什么功能this.$set向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新，用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如this.myObject.newProperty = 'hi')，你会发现vue官网是vue.set。这个this.$set()和它有什么关系呢？咱先说this.$set()，因为他们俩的区别就涉及原理问题。二、使用this.$set对象中使用：三个参数：this.$set("改.

原创 判断一个对象中是否具有某个属性和这个对象是否为空

关键方法：hasOwnProperty代码： if(this.$route.query.hasOwnProperty('orderRepayStatus')){ this.replyShowStatus=false }else{ this.replyShowStatus=true }效果图：

转载 HTML5基础加强css样式篇（background-image线性渐变函数：linear-gradient）（四十）

转载：https://blog.csdn.net/u010853130/article/details/69538952

原创 Git拉取或推送，提示 HTTP Basic: Access denied fatal: Authentication failed 解决方案

步骤：进入控制面板》用户账号》凭据管理器？windows凭据》普通凭据，在里面找到git，点开编辑密码，更新为账号密码就行（我写的是git上的账号和密码）之后就可以正常操作了。 效果图：...

转载 git的安装与配置

链接：https://blog.csdn.net/huangqqdy/article/details/83032408

原创 搭建vue(cli2)脚手架

什么是Vue脚手架：vue-cli就是Vue的脚手架工具，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以生产目录结构，本地调试及代码部署等，这就节省了我们的时间。搭建步骤：（注意：node的版本在6.0以上，避免版本低出错）①：找到项目放的文件夹。②：打开文件夹，鼠标点击空白处，shift+鼠标右击，运行powershell（记得先以管理员的身份运行）这是没有以管理员身份运行的报错以管理员身份运行后输入下面的命令：（然后输入A或者Y 回车）...

原创 vue中动态绑定本地图片:src的坑

前言：前端开发中，有时候我们要使用本地图片，今天我就入坑了。在保证路径的正确下，动态绑定就是不会加载图片。效果图解决办法：两种①：②：看网上说的还可以使用@进行找到根路径，我试了好多次不行（报错）--希望大佬们请教下：我感觉不是我路径问题啊就这这样：...

原创 js或者vue中删除一个对象的某一个属性

前言：在开发中，无论是前端还是后端都需要对对象的属性进行操作，今天在项目中就用到了对对象的属性的删除，具体如下：上图：解决办法：方法①：使用原生的js的delete删除方法方法②：在vue中使用this.$delete('对象','删除的属性').效果图：...

转载 坑：URI中的 “//” 有什么用？

原文链接：https://blog.csdn.net/u013256816/article/details/105190378?utm_medium=distribute.pc_feed.none-task-blog-alirecmd-27&depth_1-utm_source=distribute.pc_feed.none-task-blog-alirecmd-27&request_id=

原创 使用redux传参时报错Expected `onClick` listener to be a function, instead got a value of `object` type.

描述：这个错误是在做react遇到的，如图原因：当使用redux时操作state通过传参的方式改变state。我们必须用下面的方法。

原创 redux中state数据已更新，但是页面上的数据没有随之更新

前言：

原创 redux中多个reducer合并详解及注意事项

前言：

原创 react-redux的详细介绍及使用

react-redux简介：React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据react-redux几个知识（Provider，connect，mapStateToProps，mapDispathToProps）①：Provider是react-redux 提供的一个 Re...

原创 redux与react-redux的区别：

redux简介：redux是react中进行state状态管理的JS库（并不是react插件），一般是管理多个组件中共享数据状态。这个是和Vuex是一样的。react-redux简介：React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。①：redux和组件进行对接的时候...

原创 redux的用法详解

前言：

原创 微信小程序图片上传和预览以及取消上传图片案例

前言：做小程序项目遇到一个需求，就是上传图片和预览，以及取消指定的图片，其实这个功能挺好搞的，借助微信官方的API结合实现，只不过注意一点细节。不多说了直接上代码和效果图。大家可以直接复制我的代码进行实现功能。效果图：代码：wxml代码：<view class="container"> <view class="uploadContainer"&gt...

原创 踩坑：微信小程序block问题

前言：今天在做微信小程序的时候，遇到了一个坑。原本我的页面都写完了。样式在微信开发工具上显示的没问题。想着就想用真机调试看下，谁知道，图片样式乱了。解决办法：通过真机调试，找到问题，原来是图片的宽度没有设置为100%,设置100%后又运行调试还是不行。细心地我查看Wxml里的代码，注意到一个细节，就是我imgage外层block标签没有渲染。这时我才知道问题的真正所在。问题出在bloc...

原创 Vuex的详解和基本使用介绍

前言：在进行真正介绍Vuex时先给大家引入几个

原创 Vue按需导入lazy-load懒加载无效解决办法

前言：今天做Vue项目实现图片懒加载的时候，按需导入可是没效果。查了好多资料都不行。我就试试 全部导入mint-ui。果然可以啦，神奇。解决办法：将Mint-UI全部导入。（我也不知道什么原因。有哪位大神知道或者能解决按需导入的没出效果的问题。请指教下小弟）...

转载 ：flex布局遇到white-space:nowrap失效的问题

：flex布局遇到white-space:nowrap失效的问题https://blog.csdn.net/weixin_39072332/article/details/100162537

原创 跳坑：Vue引入mui.min.js或者mui.js报错

https://www.cnblogs.com/lingXie/p/11383277.html

原创 Vue导入Mint-UI样式不显示问题

前言：Vue通过npm或者cnpm下载Mint-UI导入后样式不显示问题。如果包没问题的话，那就是自己少导入了一个css样式。截图：效果：结尾：好好写代码，天天向上！！...

原创 微信小程序rpx和px互转和获得当前手机的宽高

获得当前手机的宽高：（注意:单位是px）var phoneInfo=wx.getSystemInfoSync();var pWidth=phoneInfo.windowWidth;//宽var pHeight=phoneInfo.windowHeight;//高rpx转px:var px = rpx / 750 * wx.getSystemInfoSync().wind...

原创 CSS重绘和重排(回流)

一、什么是重绘Repaint和重排（回流reflow）重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）引起重...

原创 px em rem.三者的区别与共同点

前言：在写页面的时候对页面的布局和样式的设置必然少不了像素的操作。比如：字体的大小，盒子之间的距离。下面我就给简单的给大家介绍下px,em,rem以及他们相同点与区别。相同点：px、em、rem都是计量单位，都能表示尺寸。不同点：Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小...

原创 VSCode设置与删除代码模板(vue和react为例)

前言：在我们做开发中，免不了会偷个懒，节省自己的写代码的时间。想通过一些快捷键直接把想要的模板对象创建出来。今天给大家详细的写下，在VSCode中怎样去设置代码模板。步骤：①：找到VSCode里的左上角的文件，然后点击，找到列表里的首选项，在首选项里会看到用户代码片段②：然后进行设置，自己的代码片段。下面我以react为例进行解释。（直接从上面第②步开始）大家如果想看Vue的可...

原创 微信小程序wx.previewImage()无效的问题

前言： 在做微信小程序点击图片可以预览并且滑动预览的时，遇到的一个问题，刚开始也没认真看官方API就导致了自己效果没出来来。今天在这记录下原因： 我在设置wx.previewImage({urls：})里的urls时，我数组里是用数据是集合形式的（类似：[{src:"...."},{src:"...."}]）这样的，效果死活不出来，最后又看了官方文档（右...

原创 .net中WebApi跨域Session为null的问题

前言：这几天用webapi做后台的数据接口，session一直为null，之前跳过这个坑，今天这方面的业务的时候忘了咋解决的了，自己又弄了好久才解决。今天写个博客记录一下。问题描述：由于Net中的webapi是默认不开启的，我们想要使用session必须配置session（别忘了解决跨域的问题，webapi中跨域也是要自己解决的）解决办法：如果是前后台分离的话必须进行配置跨域：...

原创 Node.js的安装和cnpm的配置

1、下载最新版本的Node.js，下载地址Node.js下载２、打开安装包里面的．msi应用文件，按照安装步骤一直点击next，直到安装成功3、配置环境：随便在一个内存硬盘新建一个文件夹（我的新建在D盘nodejs文件夹下），命名为node_global，并打开控制面板中的高级系统设置，设置环境变量。（1）在用户变量里的Path变量里新建一个环境变量：D:\nodejs\node_gl...

转载 BootStrap如何让图片自适应不同屏幕宽度，并居中显示。

我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲：- 让包裹图片的盒子绝对定位，- left:50%,- Margin-left：图片宽度的一半看例子吧：<!DOCTYPE html><html lang="en"&...