Devin_chen520-优快云博客

原创优化vue构建速度优化

vue开发环境构建优化使用vue-cli默认打包配置时，开发环境往往构建很慢这是默认配置构建速度，整整花了50s这是优化后构建速度，可以看到快了十倍多。这里使用了缓存进行构建，即使关机重启后也可以加快构建速度。大大的减少了我们等待的时间。接下来我们来看下如何配置的：在vue.config.js中加上：const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');const devPlug..

2022-01-17 21:51:42 2126

原创完美解决vue在路由history模式下打包刷新报404（nginx）

history模式的配置方法我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。首先要将mode设置为history：const router = new VueRouter({ mode: 'history', routes: [...]})nginxlocation / { try_files $uri $uri/ /index.html;}然后就没了...这里我们需要清楚为什么会报404：我们用nginx部署项目，然后在地址栏..

2021-10-13 16:50:03 4120

原创版本号的正则表达式

^([1-9]\d|[1-9])(\.([0-9]){1,3}){1,9}$

2021-08-12 17:03:43 491

原创 vue3的响应式

如果你平时有关注 Vue 的进展的话，可能已经知道了在 Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。 Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。let p = new Proxy(target, handler)target 代表需要添加代理的对象， handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。接下来我们通过 Proxy 来实现一个数据响应式.

2021-06-29 14:32:45 280 1

原创 JS中的模块化

模块化使用模块化肯定是有原因的，那么使用模块化可以给我们带来以下好处解决命名冲突提供复用性提高代码可维护性立即执行函数在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题 (function(globalVariable){ globalVariable.test = function() {} // ... 声明各种变量、函数都不会污染全局作用域 })(globalVariable)AMD 和 CMD鉴于目前这两种实现方式已

2021-06-29 14:17:10 106

原创原型继承和 Class 继承

首先先来讲下 class ，其实在 JS 中并不存在类， class 只是语法糖，本质还是函数。class Person {}Person instanceof Function // true这里将会使用分别使用原型和 class 的方式来实现继承。组合继承组合继承是最常用的继承方式function Parent(value) { this.val = value}Parent.prototype.getValue = function() { console.log(

2021-06-29 14:00:36 155 1

原创 js中this 是什么？!bind的概念！

this 是很多人会混淆的概念，但是其实它一点都不难，只是网上很多文章把简单的东西说复杂了。在这一小节中，你一定会彻底明白 this 这个概念的。我们先来看几个函数调用的场景functionfoo() { console.log(this.a)}var a = 1foo()const obj = { a: 2, foo: foo}obj.foo()const c = new foo()接下来我们一个个分析上面几个场景对于直接调用 foo 来说，不管 f

2021-06-29 11:16:26 177 1

原创在vue中使用tinymce富文本

本文主要介绍两种方式：第一种是直接加载远程脚本，不需要任何依赖。这是具体实现的效果，支持所有的功能：这是加载远程脚本的js文件：这里是tinymce组件：这里是再页面上使用：<template> <div class="home"> <Tinymce v-model="value" :height="500"></Tinymce> </div></template><scr

2021-06-24 10:52:06 1190 1

原创记录element固定列并且固定高度过后，滚动到底部错位的问题解决

在做项目中遇到一个困扰我很久的问题，使用element表格固定列过后，当滚动条滑动哦那个到底部时，列表会出现错位。问题所在：项目中自定义了滚动条样式，设置的宽高不一样。解决方法：将宽高设置成一样...

2021-05-10 15:50:29 2009 3

原创基于elementUI样式封装的Table,Form,拖动弹框

在开篇前现贴个gitee地址https://gitee.com/DevinCP/element-ui_table_form，求star！！！表格组件在开发中我们经常会遇到这种样式：一般情况下，我们使用 Element 的 Table，Pagination 组件写一个简单的页面，会像下面这样：可以看出，要写这样一个页面，有一些东西需要处理，如：默认加载数据，分页切换等操作，都是需要单独处理。一般，在 Table 上面，还有一个搜索框，里面有几个搜索条件的输入框用来辅助搜索展示数.

2021-04-14 17:09:15 257 1

原创 vue项目文件压缩，图片压缩vue.config.js配置优化

项目中我们会遇到静态文件过大，上线后网页加载慢。下面我们就来解决这类问题。gzip加速第一步安装依赖：npm install --save-dev compression-webpack-plugin这样会安装最新的版本，如果你webpack版本过低，则会安装失败。会提示以上内容。这里就需要降低compression-webpack-plugin版本，这里我使用的是5.0.1版本npm install --save--dev compression-webpack-plug

2021-04-14 10:41:56 4098 7

原创前端性能优化

总的来说性能优化这个领域的很多内容都很碎片化。图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。了解了如何计算图片大小..

2021-04-13 22:50:44 112 1

原创 Vue中的NextTick 原理分析

nextTick 可以让我们在下次DOM更新循环结束之后执行延迟回调，用于获取更新后的DOM.在 Vue 2.4 之前都是使用的 microtasks，但是 microtasks 的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用 macrotasks 又可能会出现渲染的性能问题。所以在新版本中，会默认使用 microtasks，但在特殊情况下会使用 macrotasks，比如 v-on对于实现 macrotasks ，会先判断是否能使用 setImmediate ，不

2021-04-13 22:25:11 222 1

a1983029606的博客