deanwinnie-CSDN博客

原创 node升级到16+以后 node-sass和sass-loader的版本冲突

在node升级到16以后，npm i 老项目就报错了，提示还是node-sass和sass-loader的问题。

2023-07-26 17:50:22 916

原创 postcss-loader安装问题

然后再次阅读了一边postcss-loaderde的说明文档里面写着You need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.一开始下载的postcss-loaderde 版本是5.2.0，然后在npm i的时候就一直报错，显示的是版本不兼容，需要我把wepack升级到5，然后我把版本换成了4.3.0 问题解决。

2023-07-26 17:21:20 357

原创 TypeScript基础

ypeScript是JavaScript的一个超集，任何合法的JavaScript代码都能在TypeScript中运行，它给原生的JavaScript带来了强类型的定义

2023-03-08 09:23:41 1369 3

原创 element的form数组表单验证——循环表单校验

开发项目的时候遇到了数组循环表单校验的需求。具体解决方案如下：我这边是多表单校验，包含对象和数组表单1、创建一个Promise对象//只有form表单是对象表单，其他都是数组表单const formName = ['form','orderForm','buyerForm','riskForm','supplierForm','basicsForm']const validates = (item) => { return new Promise((resolve, reje

2022-05-23 14:44:39 3184

原创 JS正则基础知识

1 正则相关属性和方法1.1 lastIndex属性当作为正则表达式对象的方法使用时，要特别注意它的lastIndex属性。lastIndex从字面上来讲就是最后一个索引，实际上它的意思是正则表达式开始下一次查找的索引位置，第一次的时候总是为0的。非全局模式lastIndex属性不生效1.2 匹配方法test()Regex.test(str);当正则在全局模式下使用test方法时需要注意一个问题例子如下：var re=/[a-z]\d/g;console.log(re.lastI

2022-02-24 16:08:33 585

原创 vant的表单校验规则

通过 rules 定义表单校验规则具体代码如下<div class="wrapper" > <div class="block" @click.stop> <div class="block-title">服务提交</div> <van-form @submit="submitForm" ref='form'> <van-field v-model="name" na

2021-12-17 15:03:14 8707

原创清除H5的浏览器缓存

重新发版后的H5页面经常会因为浏览器缓存的问题而出现各种的问题这次的方法是通过webpack改变每次打包后的目录名称来达到去除缓存的目的具体操作在项目的vue.config.js文件中添加assetsDirmodule.exports = { publicPath: "/", assetsDir: 'assets/' + version,//打包增加随机目录，去除缓存（version是自己定义的一个随机数） .......}...

2021-10-28 16:50:55 1969

原创 vue项目中列表的重新渲染

因为项目的需求需要通过按钮来实现表格的重新的渲染开始想的方法有点蠢，就是通过重新调用接口获取数据来实现重新渲染；但是这个方法在重复切换的时候发现还是有失效的问题如1→2没问题，但是2→1就有问题了；最终解决方法后来发现通过变换key的值来成功实现了列表的重新渲染在列表的标签的标签上增加key如下<div class="table" :key="tableKey">通过点击更改tableKey的值如this.tableKey++;这样就实现了页面的重复渲染...

2021-07-15 14:09:00 1577

原创 vue本地运行项目页面出现Whitelabel Error Page问题

当直接打开带有路由的页面时，页面出现Whitelabel Error Page报错，如：http://192.168.0.6:8080/ 可以显示http://192.168.0.6:8080/login 页面出现Whitelabel Error Page错误这是当vue项目为history的路由模式下，且做了代理跨域就会出现这样的情况，换成hash路由或者换一个跨域的方式（如CORS跨域）就能解决这个问题...

2021-06-28 13:47:06 3895 2

原创 H5内嵌到App中出现的问题以及解决办法

H5内嵌到ios App中出现的问题1、在输入信息的时候键盘唤起—-页面发生放大问题在浏览器中也会出现这种情况，浏览器的解决办法是禁止页面缩放解决办法：在/public/index.html中添加下列代码<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

2021-04-08 15:54:34 3513

原创 label标签

label标签是为input 元素定义标注<label for="winnie">你的名字</label><input type="text" id="winnie" >“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关input元素的 id 属性的值。如果你在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上点击label标签内的文字–即点击你的

2020-11-08 22:40:05 113

原创 Vuex学习笔记

Vuex主要解决的问题我们经常需要一个状态，数据需要在多个组件之间互用，比如昵称，头像vuex官方文档每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2、你不能直接改变 store 中的状态。改变 store 中的

2020-10-20 21:27:32 219

原创图片懒加载vue-lazyload插件

这里使用了vue-lazyload的插件来实现图片的懒加载首先在项目中安装一下插件npm i vue-lazyload -S然后在main.js中引用挂载import Vuelazyload from 'vue-lazyload'Vue.use(Vuelazyload,{ loading:'/imgs/loading-svg/loading-bubbles.svg',//这个路径是我的懒加载图片的地址 error:'imgs/error.svg'});这样在加载的时候就会成呈现一

2020-10-19 22:27:27 161

原创 sass的自定义函数功能（即@mixin和@include的运用）

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式即代码复用首先定义一个公共的scss文件用来存放自定义方法这里举的例子是一个背景图片样式的复用/*背景图片样式的复用*/@mixin bgImg($w,$h,$img,$size:contain){ display: inline-block; width: $w; height: $h; background: url($img) no-repeat center; background-siz

2020-10-19 09:23:26 1251

原创 sass中声明变量与运用

创建一个存放变量的scss文件便于统一管理在里面声明变量$colorA: #FF6600 !default; $colorB: blue !default; $colorC: #666666 !default;然后再调用的页面中导入，引用<style lang="scss">@import './assets/scss/config.scss';.fontColor { color: $colorB;}</style>

2020-10-14 21:08:31 382

原创 Storage的封装

封装Storage的原因Storage本身具有API，但是只是简单的key/value形式Storage只存储字符串，需要转换成json对象Storage只能一次性删除，不能单个清空/** * Storage封装 */const STORAGE_KEY='mywen';export default{ //存储值 setItem(key,value,module_name){ if(module_name){ let val=this.get

2020-10-13 10:03:17 320

原创 localStorage、sessionStorage、cookie三者的区别

生命周期：cookie默认保存在内存中，随浏览器关闭失效（如果设置过期时间，在到过期时间后失效）；localStorage理论上永久有效的，除非主动清除；sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后会被清除。存储容量：cookie是4k；localStorage和sessionStorage是5M存储位置：cookie保存在客户端，每次请求时都会带上；localStorage和sessionStorage保存在客户端，不与服务端交互。节省网络流量路径：cookie有路径限制，

2020-10-12 22:24:21 139 1

weixin_44169027的博客