- 博客(31)
- 收藏
- 关注
RSS订阅原创 前端build打包过程中访问项目404
思路就是先删除dist-last的包，再把当前的包disp复制给dist-last，保留下来作为回滚准备，然后把打包好的dist-build复制到dist里面，这样就无缝替换了，最后执行touch ./dist/.gitkeep是为了保留文件，dist文件如果是空的话是不存在的。场景是前端在npm run build以后，项目会重新构建一个包去替换，但是在这个过程中之前的包会被删掉，新的包还没打完，所以访问的时候会报404，解决方案。下面附上upload.js代码。再加个命令用来回滚代码。
2023-03-16 11:34:39
486
原创 使用git commit作为标记记录当前项目提交的版本号
场景在vue项目中，webpack配置文件执行child_process用来获取git commit号，然后赋值给全局变量进行使用。ProjectVersion可以在项目里直接使用，值就是当前提交的commit号。
2023-03-14 12:47:42
358
原创 闭包，深入理解，浅显说明
闭包，很难下定义是什么，但又是一个进阶中高级开发的必备概念，今天就深入浅出的说说闭包是什么，如何在实际开发中应用闭包；首先从字面上理解：闭，关住的意思，被封存在一个独立的空间；包，包裹包含；想象成一个书包，把文具书本放进去拉住拉链就形成了闭包；官方给出的解释是能够读取其他函数内部变量的函数，定义在函数内部的函数，本质上是内部函数和外部函数连接的桥梁；function A() {let num = 0return function () { return num }}let fn =
2021-07-19 17:25:35
117
原创 作用域，深入作用域
作用域简单来说就是一个环境，来确定在何处查找变量和方法。一共分两种作用域，全局作用域和局部作用域（函数作用域）。全局作用域全局作用域在页面打开被创建，页面关闭销毁；编写在script里的变量和方法，作用域为全局，页面任意位置都能访问；全局作用域有内置对象window；全局作用域的变量和函数绑定在window上（let,const除外）局部作用域一个函数既是一个局部作用域，函数执行创建，函数结束销毁；每调用一次函数，创建一个新的作用域，函数内的变量和方法重新创建，每个作用域都是独立的；
2021-07-14 15:25:55
91
原创 原型链剖析
原型链是一个经常被提起的概念，也是前端必备的知识，要想弄明白什么是原型链，首先要有对象的基本认知。在javascript中，万物皆为对象，对象就好像一个容器，里面包含了属性和方法。比如基本数据类型（number，string，boolean） 引用数据类型（object，array，deta，function）都可以成为对象，因为他们都有属于自己原生的属性和方法。JS规定，所有的对象都有自己的原型对象，通过prototype来访问。再来介绍三个兄弟 — 构造函数，原型对象，实例对象构造函数：用来初
2021-07-08 17:59:32
106
原创 BFC（块级格式化上下文）
BFC是Block Formatting Contexts缩写Block 说明只针对块级元素Formatting Contexts 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通俗讲BFC就是页面上独立的一块渲染区域，只有块盒子参与，这个区域不受外界样式的影响，决定了子元素如何布局。什么时候才需要BFC呢，但凡写css，就会需要BFC，那BFC解决了什么问题呢？.BFC的特性属于同一个
2021-07-08 16:57:50
109
原创 node升级版本后，运行启动vue项目打不开报错
因为某种原因升级了node版本，但是vue项目的安装依赖还是之前的node版本，所以不相匹配启动不了。这个时候我们兼容一下就可以了
2021-06-03 11:53:59
1315
原创 vue项目打包后样式css失效不生效
在本地开发的时候还没问题，不管是写在全局还是scoped里面，但打包完到dev或者master环境就不行了看下main.js的导入顺序，要把router放在样式的后面
2021-05-08 17:09:04
2600
原创 数组的方法
isArrayisArray() 方法用于判断一个对象是否为数组，如果对象是数组返回 true，否则返回 false。let arr = [1,2,3]Array.isArray(arr) //true || falseforEachforEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，有三个参数，1必须，当前元素，2当前索引，3当前数组。注意:forEach() 对于空数组是不会执行回调函数的。let arr = [1,2,3]arr.forEach((.
2021-01-28 18:44:04
355
转载 前端优化之重绘重排
浏览器运行机制图：浏览器的运行机制：layout：布局；1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（Rendering Tree/Frame Tree）；
2021-01-08 14:39:32
288
原创 前端静态文件缓存到nginx服务器上
前文：作为一个前端开发，有义务多学习一些项目前后的扩展内容，nginx也算一个比较接近前端的模块，所以多了解了一下（主要是被迫要做一个需求）前端的静态文件，图片，字体，css,js等等这些，可能打包完以后都不会改，就算改也不会经常的，所以跟的包一起部署的话，会影响用户的体验，已经打开页面的速度，所以把不经常修改的内容放到nginx，然后再缓存起来。当用户访问页面时，第一次去请求nginx，配置了缓存以后，第二次则会请求浏览器缓存，这样用户以后再打开页面的时候，就不会再重新请求。具体实现也是.
2021-01-06 11:49:44
1100
原创 若依框架内容区域多出导航栏
出现这个情况是本地没有配置路由，使用了管理端的路由，而且所出现的页面是三级菜单解决的方法是在项目的目录下找到当前页，同级写一个router-view即可，然后在管理端配置上路由连接，需要注意的是，配置完菜单选择里面的组件路径，需要选择目录...
2020-10-27 15:30:44
3459
原创 Nginx部署两个vue项目
公司要求一个URL下连接两个项目，查阅了半天了解到nginx，研究了研究终于搞定了，记录一下过程，方便以后温习。线上nginx搭建是后台写的，开发环境是前端（也就是我）写的，所以文章是以前端角度描述的。首先主域名是www.url.com，要绑定的子域名是www.url.com/two（two是第二个项目的名字）第一个项目默认为根url，'/' 就自动选择第一个项目，第二个项目为 '/two' ， url输入www.url.com/自动选择第一个项目，url输入www.url.com/two自动选
2020-07-22 16:04:42
1224
转载 Cannot find module ‘xxx‘，错误解决方法
错误信息解决方法进入router中的index.jscomponent: () => import('@/views/login/index'),改为component: (resolve) => require(["@/views/login/index"], resolve),如果是动态路由则export const loadView = (view) => { // 路由懒加载 return () => import(`@/views/${view.
2020-07-08 11:22:54
8783
转载 vue之使用cookie
vue资源库中有个插件很好用vue-cookies,专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。本篇博文就来介绍如何使用vue-cookies插件。安装vue-cookiesnpm install vue-cookies --save引入vue-cookies安装完毕后，我们需要在vue项目中明确引入vue-cookies。import Vue from 'vue'import VueCooki..
2020-06-30 11:13:50
337
原创 cookies和sessionstorage和localstorage区别
不同点 存储大小 有效时间 数据与服务器交互方式 cookies <=4K 在设置cookie过期之前一直有效（无论窗口浏览器是否关闭） 正常情况下，cookies数据会自动传到服务器，服务器也可以写cookie到客户端 sessionstorage 5M 数据在当前浏览器关闭后删除（sessionStorage与存储数据的顶级窗口或浏览器选项卡具有相同的生命周期。） 不会发送数据到服务端 localstorage 5M 持
2020-06-30 10:55:49
138
原创 官网下载Git太慢的解决方法
git官网下载的慢，可以使用国内的淘宝npm镜像下载，网址：https://npm.taobao.org/mirrors/git-for-windows/
2019-10-08 11:57:43
313
原创 小程序防点击，多次点击事假
debounce.js（import isObject from './isObject.js'// import root from './.internal/root.js'const root = window;/*** Creates a debounced function that delays invoking `func` until after `wai...
2019-07-18 16:02:17
229
原创 live-server
这是一个具有实时重载功能的小型开发服务器。用它来热加载你的HTML / JavaScript / CSS文件，但不能用于部署最终的网站。安装使用1、安装nodeJs2、打开命令行工具，输入命令 npm install live-server -g3、命令行进入项目文件中，输入命令 live-sever 启动注意事项输入命令 live-sever 启动，默认会自动打开浏览器，...
2019-06-13 20:27:30
1905
原创 rem开发移动端
关于开发移动端有很多的方式，用的最多的单位是rem，rem单位是自适应单位，开发一套代码，可以适配不同的手机端，但是往往rem针对新手用的不熟悉，也不知道怎么用，今天就介绍一种简单的方式；前提开发环境是在Visual Studio Code上。!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEv...
2019-06-13 17:17:17
642
原创 开发的一些小技巧
font-size:0;解决inline-block元素之间的空白缝隙，可以高程度的还原设计图。因为元素节点有文本节点，在缩进代码时会占据宽度，很多浏览器中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 inline-block 元素间的换行符去掉，这3px的间距就会消失了。可以在inline-block的父元素中加上font-size:0，然...
2019-06-13 16:01:55
144
转载 javascript对URL中的参数进行简单加密处理
javascript对URL中的参数进行简单加密处理javascript的api本来就支持Base64，因此我们可以很方便的来进行编码和解码。var encodeData = window.btoa("name=xiaoming&age=10")//编码var decodeData = window.atob(encodeData)//解码。下面来个具体的例子来说明如何...
2018-10-31 13:39:18
1695
转载 关于Git每次进入都需要输入用户名和密码的问题解决
之前使用git的时候每次都需要输入密码，输入一次两次还好，每次都输入真的恨不得砸电脑，相信各位小伙伴都需到过和我一样的问题，今天我们就来说说这个问题：首先，如果我们git clone的下载代码的时候是连接的https://而不是git@git (ssh)的形式，当我们操作git pull/push到远程的时候，总是提示我们输入账号和密码才能操作成功，频繁的输入账号和密码会很麻烦，也特别烦恼。...
2018-09-06 16:28:14
12735
原创 Wamp如何设置访问域名
打开C盘，找到 C:\WINDOWS\system32\drivers\etc\；找到hosts文件，（一般的参考路径是C:\WINDOWS\system32\drivers\etc\hosts，有时也会不同），用记事本打开； 在末尾插入（127.0.0.1 是路径文件，test.com 是windos 要转型的域名）： 127.0.0.1 test.com 2 ...
2018-08-28 18:04:06
1627
转载 jquery如何获取元素的滚动高度
获取浏览器显示区域（可视区域）的高度 ： $(window).height();获取浏览器显示区域（可视区域）的宽度 ： $(window).width();获取页面的文档高度 $(document).height();获取页面的文档宽度 ： $(document).width();浏览器当前窗口文档body的高度： $(document.body).height();浏...
2018-08-23 18:03:36
4310
1
转载 微信小程序，返回数据给上一界面
我们知道微信官方文档中教我们如何把当前界面的数据传输到要跳转的下一界面中，那么如何在下一界面返回当前界面时把数据返回来呢？假设上一界面为A，对应的A.js中有一段这样的代码：页面（{ data：{对象：''，}}）下一界面为B，对应的B.js中有这个方法：navigateBackFunc：function（）{var pages = getCurrentPages（...
2018-08-08 19:10:26
675
原创 微信小程序 scroll-view 实现锚点跳转
在微信小程序中，使用scroll-view实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll-view>的scroll-into-view属性。实现锚点跳转主要以下几点：1，最外层容器使用滚动视图 2，赋值滚动到视图，如：<scroll-view scroll-into-view =“{{toView}}”>3，设置scroll-...
2018-08-07 14:43:51
4060
1
转载 JavaScript到底是不是单线程
JavaScript引擎在了解计时器内部运作前，我们必须清楚一点，触发和执行并不是同一概念，计时器的回调函数一定会在指定delay的时间后被触发，但并不一定立即执行，可能需要等待。所有JavaScript代码是在一个线程里执行的，像鼠标点击和计时器之类的事件只有在JS单线程空闲时才执行。我们来看一下图表，一开始你可能并没发现什么或啥都不懂，但请静下心来，在脑海里绘制出这个场景这个图表中有许多数据信...
2018-06-29 08:54:26
167
转载 服务端渲染和客户端渲染的对比
这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template1、script 标签导入包，当这个标签导入完毕后，在window全局中就有了template 函数。2、创建一个script标签，内部是模板字符串<script type="text/template" id="tmpl">3、 var htmlStr = template('tmpl'...
2018-06-24 09:54:15
1032
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人