- 博客(59)
- 收藏
- 关注
原创 使用externals配置,在VUE 工程中引入外部js文件,减少打包时间
以VUE项目中引入echarts文件为例:第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>第二步 在项目找到 build > webpack.base.conf.js module.exports = { externals: { ...
2021-07-18 16:55:00
1462
原创 npm run build --report 不生成report分析文件原因
运行 下面命令即可 (命令行后缀参数需要多加 -- 符号)npm run build -- --report
2021-07-18 16:51:20
1357
原创 大屏界面自适应方案,使用vscode,px to rem插件全局
vscode px to rem插件页面1rem=20px直接按1920设计稿写最后全选转换ALT+Z自适应代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", ...
2021-07-06 11:29:31
740
原创 在element中,切换导航栏时,echart自动伸缩(页面大小变动时,echart伸缩不了)
<div ref="ECharts_bar2" class="echarts echart_line"></div>setTimeout(()=>{this.initEChartLine()// 初始化EChartconstresizeOb=newResizeObserver((entries)=>{for(constentryofentries){t...
2021-07-03 18:05:06
449
原创 npm ERR! Failed at the [email protected] install script.
npm i 时报错如下npm ERR! [email protected] install: `node build.js || nodejs build.js`npm ERR!npm ERR! Failed at the [email protected] install script.先运行npm install [email protected] --ignore-scripts再运行npm iOK!
2021-06-09 10:44:17
4406
1
原创 如何刷一些网站的阅读量
如果是一些没有做IP校验拦截的网站,F12,复制如下代码回车即可(如掘金)setInterval(()=>{ with(document){ write("<iframe height='100%' width='100%' src='"+location.href+"'></iframe>") void(close()); }; },3000)...
2021-06-02 17:44:23
1304
原创 npm i 错误 npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type “workspace:“: workspace
npm ERR! code EUNSUPPORTEDPROTOCOLnpm ERR! Unsupported URL Type "workspace:": workspace:^7.12.1经过排查,因为我用的是私服的npm,删除一个重复的包即可我上传时穿了个错误的npm包
2021-05-24 15:05:08
23842
5
原创 echart在vue中id重复问题
封装的echarts组件重复调用时,id重复会导致页面不渲染,数据覆盖等一系列问题解决方法:用ref解决了问题解决方法://修改前<div id="echart"></div>//修改后<div ref="echart"></div>初始化调用时,document.getElementById(‘xxx’)改成this.$refs.xxx//修改前var myChart = this.$echarts.i...
2021-03-09 20:33:21
1847
2
原创 NavigationDuplicated: Avoided redundant navigation to current location 解决重复路由错误
原因:是指路由重复。虽然对项目无影响,但是看到有红的不舒服!解决方法:打开router文件夹下的index.js文件中添加如下代码://获取原型对象上的push函数const originalPush = Router.prototype.push//修改原型对象中的push方法Router.prototype.push = function push(location) { return originalPush.call(this, locati...
2021-03-04 20:59:38
1718
1
原创 解决build编译错误FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
在项目node_modules\.bin\vue-cli-service.cmd文件中添加 --max_old_space_size=40964096数字根据需要添加相应大小node --max_old_space_size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
2021-03-04 18:54:07
2032
2
原创 离线环境下安装node-sass
1.cmd查看node-sass版本node -p "[process.platform, process.arch, process.versions.modules].join('-')"如:win32-x64-67releases下载对应版本在项目根目录下新建.npmrc 文件,路径为下载文件地址sass_binary_path=C:\win32-x64-83_binding4.node重新 npm i 或者npm i node-sass@版本 ...over.
2021-02-25 16:31:23
1630
原创 nrm install 安装与使用
nrm 是一个 npm源管理器,允许你快速地在 npm源间切换。什么意思呢,npm默认情况下是使用npm官方源(使用npm config ls命令可以查看),在国内用这个源肯定是不靠谱的,一般我们都会用淘宝npm源:https://registry.npm.taobao.org/,修改源的方式也很简单,在终端输入:npm set registry https://registry.npm.taobao.org/npm set registry https://registry.np..
2021-02-22 15:55:52
850
原创 安装npm后,nrm ls 报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)
报错截图:1、首先检查node.js是否安装成功,输入 node -v 若可查看版本号,如图所示即安装成功;若不一致则重新安装node.js。node.js官方下载地址:https://nodejs.org/en/download/2.查看npm是否安装成功,如下图成功,反之则重新安装3、报错截图中可见 cli.js文件中 第17行报错,按路径找到该文件:打开文件找到报错的第17行,注掉原17行改为如图: //const NRMRC = ..
2021-02-22 15:46:29
2585
9
原创 vue使用provide / inject 友好刷新当前页面
provide / inject组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了isRouterAlive //true or false 来控制然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行其他方法:1.新建一个空白页面supplierAllBa.
2021-02-21 14:24:03
474
原创 vue中点击按钮关闭当前页面踩坑记录
vue中关闭当前页面踩坑记录当前页面直接使用window.close不行必须是新窗口才能使用window.close所以要router跳转时打开新窗口才能关闭//直接使用不行 window.close();//先使用下面跳转对应页面let routeData = this.$router.resolve({ path: `xxx`,});window.open(routeData.href, "_blank");//才能使用window.close()..
2021-02-20 17:38:58
5730
1
原创 async和await的使用(搭配promise)
async和await是ES7新产物,在我的理解中,就是为了解决promise中.then回调的使用,把异步方法(写在then里)变成同步方法.方便了我们写代码使用如下:必须搭配promise使用在方法all里,是同步的,在调用all的外面是异步的,直接输出了5,并不会去等all方法调用玩在all里的话,会按顺序等下来function a() { return new Promise((resove, reject) => { setTimeout(() =&
2020-11-03 13:57:40
886
1
原创 配置HTTPS开发环境--流程--Windows
1.下载nginx-window官网地址:http://nginx.org/en/download.html2.解压文件/运行cmd运行:start nginx输入localhost验证是否启动成功3.获取证书去阿里云或者腾讯云申请免费证书注:域名与证书是绑定的,需要先有域名才能申请证书流程:以腾讯云为例1.进入ssl证书申请页面2.申请填表3.下载证书后如下:4.修改 nginx 下的 nginx.conf配置文件..
2020-09-18 12:04:59
445
原创 和我一起学Node.js ===>第6天(over)
Node的path模块Node中的其他成员 ===>__dirname和__filenameart-template的公用模块复用模板继承:模板:填坑:blueimp-md5:md5加密表单同步提交:传统方式,浏览器会刷新(加载中),服务端返回的数据直接渲染(服务端需要返回html)异步提交:ajax,可以进行友好交互服务端重定向对异步请求无效npm install expres...
2020-09-10 09:13:12
210
原创 和我一起学Node.js ===>第5天
学习内容概要1.回调函数回顾2.一些模块化解释3.MongoDB的安装与使用4.Mongoose的使用原生ajax使用:使用回调函数封装ajax一些模块化概念:package-lock.json文件的作用:1.里面存了一些包的依赖信息,url下载地址,可以提高下载速度2.可以锁定一些版本,在npm install 的时候,可以防止自动升级版本手写es6的find函数:使用MongoDB数据库: MongoDB数据库的基本使用:...
2020-08-28 11:15:54
189
原创 什么是BFC,BFC能干嘛
BFC: 我的理解:触发BFC,即新建BFC环境,互相之间就不再影响(独立) W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。布局规则如下: 1.内部的盒子会在垂直方向,一个一个...
2020-08-18 17:55:47
341
转载 史上最全圣杯布局(转自前端神三元)
圣杯布局如图:而且要做到左右宽度固定,中间宽度自适应。#1.利用flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header,.footer{
2020-08-18 17:02:48
1406
1
原创 css 最简单的解释 品字布局
1.第一个元素使用margin:0auto居中2.第二三元素浮动,并且使用transform,位移x轴自身宽度100%3.全屏版为下面两个元素各占50%,浮动或者inline-block<!doctype html><html><head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: ..
2020-08-18 17:00:19
302
原创 css 最简单的解释 双飞翼布局
1.使三元素左浮动2.center的width为100%3.left的margin-left为-100%(父元素的100%),就跑到上面去了,right的margin-left:-本身width,跑到上面的末尾去了4.content的margin左右为两个侧边栏的width(为内容留下位置)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta.
2020-08-18 16:57:44
291
2
原创 css布局=>div垂直居中,左右10px,高度始终为宽度一半
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中方法一:利用height:0; padding-bottom: 50%;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-.
2020-08-13 15:30:05
2563
原创 css=>清除浮动,解决图片留白,元素留白问题
二.浮动: 1..清除浮动的方法:1.额外标签法,在元素后添加额外标签,并且设置clear:both2.设置父元素的overflow为hidden(触发BFC)或者设置父元素高度3.使用伪元素选择器清除浮动.parent:after{ content:''; display:block; height:0; visibility:hidden; clear:both;}4.使用双伪元素清除浮动.clearfix:...
2020-08-13 11:43:55
773
原创 HTML5新增内容精华总结
001: HTML5和HTML4究竟有哪些不同?#声明方面 HTML5 文件类型声明(<!DOCTYPE>)变成下面的形式: <!DOCTYPE html>#标准方面 HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准,而是形成了自己的一套标准。 #标签方面 新增语义标签,其中包括 <header>、<footer>、<section>、<
2020-08-13 11:40:55
435
原创 和我一起学Node.js ===>第4天
nodejs修改完代码自动重启(热部署)静态资源服务app.use("映射前缀","资源位置")在Express中使用art-template模板引擎:app.engine('html', require('express-art-template'))//新增res.render()app.set('views','新目录路径')在express中使用第三方插件获取表单信息:body-parser(中间件,用来解析post表单数据)...
2020-08-12 16:27:48
213
原创 和我一起学Node.js ===>第3天
模块化概念使用exports.add=add,导出add函数(变量)使用module.exports=add//直接导出函数,就是那个add,可以直接调用总结:1.exports.add=add... //可以使用多次,导出多个,调用时用'导出名.add..等使用'2.module.exports=add...//只有一个add导出,如果有多个module.exports,后面的覆盖前面(注:module不可省略,即使用exports=add)(导出单个成员).
2020-08-10 09:03:23
171
原创 和我一起学Node.js ===>第2天
代码风格:( [ ` 开头的js代码,要加个;在ES6中,可以用``代替字符串,其中可以用${变量名} ,直接拼接变量,省略++服务端渲染:利于seo (刷新页面),查看网页源代码客户端异步渲染(ajax):不利爬虫处理静态资源文件:如何通过服务器让客户端重定向:1.设置状态码3022.设置响应头Locationart-template:npm 安装 art-template var template = require('a...
2020-08-10 09:02:14
127
原创 妈妈再也不用担心我的布局了----总结最常用的css水平和垂直布局,
水平居中: 行内元素:0 .父元素:text-align:center 确定宽度: 1.父元素:position:relative,子元素:position:absolute;left:0,margin-left:-子元素宽/2 2.margin:0 auto 不确定宽度 1.flex :justify-content:center 2.子元素:position: absolute;transform: translateX(-50%);left:.
2020-08-06 10:56:12
240
原创 冒泡排序个人总结JavaScript
1.冒泡排序:小的在前面,大的在后面i:控制轮次j:控制前后元素比较1、比较相邻的两个元素,如果前一个比后一个大,则交换位置。(这里控制从小到大,如果要从大到小则相反)2、比较完第一轮的时候,最后一个元素是最大的元素。3、这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小。(减i)function bSort(arr) { var len = arr.length; for (var i = 0; i < len-1; i++) { for.
2020-07-30 14:48:59
251
原创 如何在chrome加载.ctx文件(亲测可用,只需3步)
1.下载.ctx拓展程序2.改名为.zip,并解压出来3.把解压出来的程序拉去到拓展程序中,重启chrome
2020-07-27 15:58:24
2348
原创 看完这篇canvas学习笔记,立马入门(附带两个demo)
DAY1:getContext('2d')moveTo(100,100);lineTo(200,100);stroke();线条不饱和解决:设置颜色和线的宽度ctx.beginPath()//开启新路径,可以设置新样式(和closePath不是对应关系,用处不同)ctx.fill()//填充ctx.closePath()//开启自动闭合,如果手动闭合,会有一点点填充不满非零环绕规则:线的渐变实现:画网格:...
2020-07-22 10:25:18
377
原创 和我一起学Node.js ===>第1天
Node.js 第1天上午总结 Node.js 是什么 JavaScript 运行时 既不是语言,也不是框架,它是一个平台 Node.js 中的 JavaScript 没有 BOM、DOM EcmaScript 基本的 JavaScript 语言部分 在 Node 中为 JavaScript 提供了一些服务器级别的 API 文件操作的能力 http 服务的能力 .
2020-07-21 10:27:03
369
原创 震惊!!!!看完本文立即精通JQuery
$(dom对象);//把dom对象转为jQuery对象$对象[0]//此为dom对象,可以用dom方法$("body").hasClass(name);//时候应用了类样式,返回值布尔$("body").addClass("name");//如果多个类同时添加中间用空格隔开 "cla1cla2"$("body").remove("name");$("body").toggleClass("name");//切换类样式,(开关)$("body").css("ba...
2020-07-15 15:39:23
283
原创 记录vue-infinite-scroll:列表无限加载使用步骤(超简洁)
1.安装cnpm i vue-infinite-scroll --save2.main.js中引入import vueiInfinite from 'vue-infinite-scroll'Vue.use(vueiInfinite)3.vue文件中使用(需要无限加载的标签添加:v-infinite-scroll="loadMore")<ul class="newsList" v-infinite-scroll="loadMore" infinite-scroll-disa
2020-07-15 09:59:35
1155
原创 记录在linux安装nginx服务(步骤简单)
##下载nginx下载地址:https://nginx.org/download/下载“nginx-1.9.9.tar.gz”,移动到/usr/local/下## 解压1. tar -zxvf nginx-1.9.9.tar.gz##进入nginx目录2. cd nginx-1.9.9## 配置3. ./configure --prefix=/usr/local/nginx#make 编译/安装4.make5.make install##运行/管理员权...
2020-07-07 14:04:26
184
原创 函数防抖与函数节流(vue实例)
1.函数防抖(debounce)函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。简单的说,当一个动作连续触发,则只执行最后一次。打个比方,坐公交,司机需要等最后一个人进入才能关门。每次进入一个人,司机就会多等待几秒再关门。 关门这个动作,在3秒内没人上车(重复触发)才能执行const _.debounce = (func, wait) => {let timer;...
2020-07-06 18:03:51
539
原创 Vue父组件调用子组件的方法(亲测可用)
1.子组件使用ref,父组件直接调用(推荐) <child ref="mychild"></child> this.$refs.mychild.childMethod("嘿嘿嘿");2.子组件注册监听事件,父组件调用$emit触发 this.$refs.mychild.$emit('childMethod','嘿嘿嘿') // 方法1:触发监听事件//子组件注册监听事件 this.$on('childMethod', (res) ...
2020-07-01 16:44:26
479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人