- 博客(26)
- 收藏
- 关注
RSS订阅原创 Vue中获取第三方UI组件库类名并修改样式
前言明明是比较简单的问题，也曾经遇见过两次，被我整复杂了，愣是来回试了一个多小时，好记性不如烂笔头，为了防止下次还走弯路，记录一下，提醒自己。问题想要修改第三方组件库 loading 组件的样式，无论如何覆盖样式都不生效，加了 /deep/ 和 !important 也是白搭。排查思路如下：查看想要覆盖的样式是否是行内样式，不是行内样式，根据其优先级才可以覆盖生效 ---- 不是行内样式；加 /deep/ 获取类名，未生效，加 !important, 不生效；这里踩了一个大坑，以前遇到过
2021-10-28 21:00:46
695
翻译 Vue-SSR 客服端混合失败（Vue hydration fails）
Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。前言前一阵遇到了一个Bug…Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node':This node type does not support this method. at some-file.js:1整整排查了2个多小时，如果要追究其根本原因，找.
2021-06-26 00:04:42
4534
3
原创 postcss-pxtorem中使某些样式不进行rem转换
在移动端项目中使用 postcss-pxtorem 做适配，同时也使用到了第三方 UI 库。在多数时候如果我们不希望对某些文件下的组件做 px 转 rem 处理，可以在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 属性来过滤掉。exclude 配置的值可以是字符串也可以是正则匹配，它匹配的是文件名或目录。用法如下：module.exports = { "plugins": { "postcss-import": {}, "postcs
2021-04-25 13:09:04
8645
3
原创 JS对象数组多条件排序
JS数组多条件排序基于Array.sort()方法，首先要了解sort()方法的用法。sort()方法可以传入一个函数作为参数，然后依据该函数的逻辑，进行数组的排序。eg:var a = [2, 3, 5, 1, 0, 9]a.sort(function(a, b){return a-b})sort()方法接收函数作为参数时，排序主要根据传入函数的返回值是否大于0进行排序。1）当 a-b < 0时，则a元素排在b元素的前面；（a、b元素位置不变）2）当a-b= 0时，a,b元素的位置不
2021-04-14 10:02:41
2173
原创 Vue进阶系列之计算属性Computed传参
作为一名进击中的前端小菜鸡，当然要会用Vue呀，还得熟练应用，计算属性computed大家也一定不陌生，但是如果遇到要传参的情况要怎么处理呢？我们知道，计算属性computed和方法method的用法及作用极为相似，区别在于计算属性基于响应式依赖进行缓存，而函数在每次重新渲染都会重新求值。方法的传参我们也应用得炉火纯青，毕竟函数传参嘛，怎么好意思说不会呢？因此我们第一反应都是像方法一样在计算属性中传参。次出我们要注意区分，计算属性是个属性，不能像函数方法一样使用，直接在属性内传参，但我们可以通过返回一个
2021-04-03 18:24:32
1022
原创 放假归来，让我们更新本地分支，同步为线上master版本吧
一个假期归来，又要开发新需求了吧，项目还是原来的项目，代码过了这么久，早就落后于master了吧。本地开发新需求从旧的master分支上切新分支总觉得缺了点啥，那就让我们把本地代码同步为线上版本吧。首先，本地切到master分支：git checkout master然后你只需要pull一下：git pull什么什么，你还要在旧的分支上继续开发，好吧，那让我们在旧分支上把代码同步至master版本，你只需要合并一下master：git merge master这就OK啦。如果你是和新同
2021-02-22 20:00:15
487
原创 深入学习服务端渲染原理及实现
一、 CSR vs SSR不同于传统拉取JS进行解析渲染的CSR（JS负责进行页面渲染），SSR实现了服务器端直接返回Html代码让浏览器进行渲染。由此，我们就很容易理解以下代码实现了一个页面SSR：// server.jsvar express = require('express')var app = express()app.get('/', (req, res) => { res.send( ` <html> <head>
2021-02-21 21:10:58
444
原创 浅拷贝与深拷贝的实现方案与应用场景
写在前面首先我们得清楚基本概念。拷贝（Copy）即复制。浅拷贝：创建一个新对象，保存原始对象属性值精准拷贝。如果属性是基本类型，拷贝的是基本类型的值，如果属性是引用类型，拷贝的是内存地址，并不会占用新的内存，这种情况下如果其中一个对象改变了这个地址，会影响到另一个对象。浅拷贝只复制指向某个对象的指针，而不复制对象本身。新旧对象共享同一块内存。深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，增加了内存，且修改新对象不会影响原对象。新对象与原对象不共享内存。赋值和深/
2020-12-06 11:35:34
797
原创 前端小白必备快捷键工具合集
工欲善其事，必先利其器。”作为一个程序员，掌握必备的快捷工具及快捷键是一堂必修课，也是提高开发工作效率的不二法门。本文从快捷开发工具及快捷键两方面为前端入门选手量身定做，打造属于你自己的快捷开发方式。针对快捷键，我一开始整理了一堆看似常用的去记忆并使用，事实上一看就会，一用就废，结果还是没能有效用上。经点拨后试着一开始选几个最为常用的命令适应使用，并逐渐记忆增加其他快捷键的使用。在工作中会对快捷键使用有新的需求，因此本文后续也会更新~~~一、快捷开发工具1. UToolsalt/ctrl + sp
2020-12-05 20:09:30
1218
原创 微医校招一面
数据类型？基本类型VS引用类型？数组去重方案？var、let与constES6新特性箭头函数事件流与事件冒泡、addEventListener第三个参数作用？flex布局水平垂直居中方案position：absolute定位absolute相对于最近的一个祖先定位，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位常用状态码，尤其是1xx开头状态码意义地址栏输入URL发生了什么？跨域解决方案...
2020-11-08 22:39:07
263
1
原创 2020.10小米校招一面
position垂直居中的设置左右两栏设置移动端适配实现的方法CSS动画webpack常用插件跨域的实现常用数组的方法，reduce、map和foreach的区别手写代码，实现flat。0.5px移动端如何实现。问一下简历上的项目相关。...
2020-11-08 22:37:03
164
原创 记录某三年经验前端岗面试题（20-30K）
前几天帮一个两年多前端学长做面试复盘，岗位要求三年经验，薪资20-30/月，问到的题目及追问的面试风格给我留下了深刻印象，面试时长1h左右。整理了下，面试问题及追问问题大致如下：Vue的技术栈有哪些？看具体项目：vue+typescript+scss+vue-routerUI框架用什么？移动端用Vant，PC端用Element-UI自己封装UI组件，造轮子JS基础–防抖和节流节流，用于后台的数据请求，flag控制用户请求频率，设置时间，flag初始为true，点击为false，下此
2020-11-02 17:45:04
1433
原创 一文搞定数组扁平化（超全面的数组拉平方案及实现）
前言面试手写代码在大厂面试中非常常见，秋招中面试小米就手写了一道flat实现的代码题，当时通过递归方式实现了数组扁平化逻辑，但没有考虑多种实现方案及其边界条件(主要是对所涉及到高阶函数的知识点不够熟练，也没有考虑空位处理)，现在从头梳理一下，并尽可能全面地总结数组扁平化的实现方案。数组扁平化数组扁平化即将一个嵌套多层的数组array(嵌套可以是任意层数)转换为只有一层的数组，如将数组[1,[2,[3,[4,5]]]]转换为[1,2,3,4,5]。最直接的数组扁平化方案是使用Array.prototy
2020-11-02 17:21:22
794
1
原创 2020海康校招（笔试+2轮面试）复盘
真的勇士，敢于在跌倒的地方爬起来。校招参加的第一场笔试，意料之中的不理想，但是从哪里跌倒的从哪里爬起来，把每次都当作查漏补缺，就没那么难受了（555…）终于肝完论文了，补上二面凉经。。。题型题型分为单选（162.5’）、多选（42.5’）、问答（210’）和编程（215’）笔试总体感觉印象中感觉单选题不难，基本都是基础知识，除了前端必须的一些基础点，数据结构里面堆栈列表二叉树也要知道一点。多选有一题不太清楚，input的type取值选项，我选了2个，去了MDN看一下，哦豁，这个选择还蛮多，对比
2020-10-13 16:44:34
2212
1
原创 yarn安装后再安装其他插件报错 xxx(命令): command not found（已解决）
最近鼓捣了下Vue3，在windows环境下搭建项目，又又又遇到了工具安装问题。很快找到错误原因，也改成功了，但node不是我想要的v12.xx版本（推荐安装的稳定版本）并且windows上的yarn好像是通过npm安装的（大佬说npm不会给yarn配置path，而且yarn的bin是node global下的，我手动配好了path所以解决了本文要解决的问题，下面会详细讲），所以把node和yarn全部卸了重装，来来回回两三次，找到了解决办法，事实证明实践出真知，网上解决方案再好也得试过起不起作用再说，问就
2020-08-10 08:16:58
2951
原创 项目实战跨域之配置nginx反向代理（基于开发环境和生产环境分析后端分别运行在本地和服务端的情况）
问题描述：前端后台项目都在本地运行，考虑到端口不同，在前端配置了代理如下，能够实现跨域请求，正常获取数据。但当我把后台项目都迁移到服务器运行时，前台却总是获取不到数据。最近在VUE项目中遇到Ajax异步请求的跨域问题，之前也有系统地学习过跨域问题，网上关于跨域的解决方案整理有很多，我就不再赘述，只在本次实战中提供个人经验。我选择了传说中最简单的跨域解决方案—nginx反向代，那么根据前后端项目都运行在本地（前端开发环境）、后端运行在服务器、前端项目分别运行在本地（前端开发环境）或者服务端进行以下三种情
2020-08-10 07:20:30
688
原创 最全解决方案：Vue 项目中 Swiper 轮播图分页器 swiper-pagination 无法显示问题（解决方案集合）
最近用Vue做项目需要加个轮播效果，结果分页器死活出不来，但轮播效果和前进后退箭头以及滚动栏都是正常显示的。基础代码如下：<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div&g
2020-07-25 23:16:24
12184
19
原创 手摸手教程之Windows系统安装MongoDB 4.2.8教程（最新）
1. 下载mongodb安装包地址链接：https://www.mongodb.com/try/download/community默认最新稳定版本，推荐下载msi的安装包。2. 安装MongoDB双击下载下来的mongodb安装包进行安装，在Windows下安装软件十分的简单，只需要next就可以了，但需要注意点下面两点：1）如下图安装界面中选择自定义安装：2）取消如下图形界面管理工具勾选，勾选的话安装会十分十分的慢，如果您想要安装的话可以访问：https://www.mongodb.co
2020-07-23 14:29:03
361
原创 VS Code批量替换文本内容：Ctrl + F
选中或者光标放在需要替换的文本上，Ctrl + F：确认需要替换的文本内容，点击右侧箭头，输入替换后的文本内容：点击下面一行替换后内容右侧逐个替换或者全部替换。
2020-07-21 23:30:27
2010
原创 you can run: npm install --save core-js/modules/es.regexp.exec core-js/modules/es.string.replace（已解决
添加this.$router.replace(path)后，在运行vue过程中出现如下报错：core-js 缺失问题，首先安装core-js ：npm install core-js@2// oryarn add core-js@2发现依旧报错，考虑可能是版本问题，安装core-js的最新版本试试：npm install core-js@3.6.4// oryarn add core-js@3.6.4成功解决。...
2020-07-18 22:42:02
12871
4
原创 Ubuntu20.04安装yarn报错gpg：cant connect to the agent：IPC connect call failed（已解决）
最近进行新项目的开发学习，用到yarn，mark一下安装过程。例行科普，首先介绍一下yarn：Yarn是Facebook等公司开发的用于替换npm的包管理工具；速度快：并行安装 + 离线模式(缓存)；版本统一。习惯用npm的同学，对命令的学习可以自行参考记忆，以下是常用命令：npm init ---- yarn initnpm install ----
2020-06-12 14:55:10
1927
原创 gulp dev报错：ReferenceError：primordials is not defined
谷歌之后得到的最佳答案：原链接：https://timonweb.com/posts/how-to-fix-referenceerror-primordials-is-not-defined-error/也许是因为你的gulp版本v3，node版本v12。解决方法：将gulp版本升级到v4。将node版本降级到v11。将graceful-fs升级到在node v12+下工作的版本4.2.2(推荐)。推荐解决办法：在package.json同级目录下新建文件npm-shrinkwrap.
2020-05-19 18:08:03
1356
原创 手摸手教程之ubuntu20.04更改国内镜像源（附其他版本ubuntu换源教程，最新详细教程）
windows10自带ubuntu系统更新到ubuntu20.04版本啦！默认的软件更新源是国外的，速度超级慢，用"apt install"安装软件时各种网络问题也是层出不穷（上次安装ubuntu后忘记修改源结果导致N多次安装半小时然后失败…亲身经历了这种苦，回过头发现修改源之后很多网络问题迎刃而解），因此我们需要更换成国内镜像源，然后正常安装和更新软件。unbuntu版本名修改源之前提示大家先查看版本名，ubuntu20.04对应的是“focal”，也就是我下面镜像源中提到的。“eoan”代表ubun
2020-05-12 09:53:45
18843
17
原创 Vue组件编写之Alert提示框组件编写
Alert提示框的vue组件编写最近一直学习vue，跟着视频敲代码，敲了两三个组件后，终于对编写组件有一个大致的思路了，以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路。主要分为三个部分：组件引入(注册路由器)、定义组件内容样式及实现组件间通信。(注册路由器使用路由组件也可放到最后一步，个人习惯先引入然后定义组件及样式便于观察组件显示效果)下面是本组件引入后显示效果，通过登匹配验证为false触发alert提示框显示，点击确认关闭提示框：:组件引入一种是写入路由，要先在在rou
2020-05-11 18:04:19
1367
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人