自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(240)
  • 收藏
  • 关注

原创 JS注意事项

1、如果数组中的某一项的值是null 或者undefined,那么该值在join()、toLocaleString()、toString()方法返回的结果中以空字符串表示。

2019-05-15 14:44:08 551

原创 前端mp3文件转wav文件的实现

运行test.js文件,报错“An error occurred: Error: Cannot find ffmpeg”,如下图所示。

2023-12-04 16:52:23 1211

原创 vue多层级组件间插槽使用

插槽使用不仅仅存在于父子组件间,当涉及跨级使用时如何处理呢?这里我们以示例的方式进行说明。有一爷爷辈(Level1)组件嵌套了爸爸辈(Level2)组件,爸爸辈组件中又嵌入了儿子辈(Level3)组件,现需要在爷爷辈组件中设置孙子组件中插槽的内容,实现方式如下:儿子(level3)组件:<template> <div> <h1>谁的{{goods}}?</h1> <!-- 定义插槽用于接受其父级组件的插槽内容 --> <s

2021-12-02 15:20:21 6790

原创 js中静态方法、原型方法、实例方法

js静态方法和原型方法的主要区别是其被访问的对象不同:构造函数的 静态方法 只能被构造函数访问,不能被其实例访问;构造函数的 原型方法 只能被其实例访问,不能被构造函数访问;请看下面的示例,将说明二者被访问的对象不同。示例:// 构造函数function People() {}// 静态方法People.say = function() { console.log("People say: Hi!")}// 原型方法People.prototype.eat = functi

2021-11-19 14:50:59 2717 1

原创 npm安装本地包

1、npm安装本地包1)安装本地包的方式:npm install 待安装包的相对路径2)安装示例现有一项目,其根目录下有一个私有npm包(“my-test-npm”),需将该私有包添加为项目依赖包。现有项目根目录结构,如下图所示添加依赖执行命令(npm install ./my-test-npm),如下图所示:package.json文件依赖包添加成功后,package.json中可见该依赖包信息2、npm卸载本地包npm uninstall 待卸载包的相对路径...

2021-11-11 15:31:11 19661 2

原创 package.json bin的作用

package.json中bin可用于创建命令,其创建命令的步骤如下:1)新建bin目录,创建timestamp文件#!/usr/bin/env nodevar progarm = require('commander');var changeFileName = require('./changeFile');//命令版本号progarm.version('0.0.1');//help命令progarm .command('help') .description('显示使用

2021-08-19 18:09:44 875

原创 npm link用法

npm link可以将本地npm模块和本地项目建立链接,方便在本地进行npm模块调试。1、npm模块和项目建立链接1)相同目录下链接项目和npm模块在同一个目录下,可以直接使用相对路径链接# test-module为本地npm模块npm link ../test-module2)不同目录下链接项目和npm模块在不同目录下,先将npm模块链接到全局,再进入项目链接npm模块。将npm模块链接到全局# 进入npm模块目录cd xxx/xxx/test-module# 将该模块链接到全局

2021-08-19 15:27:23 1722

原创 如何查看Vue CLI 3 项目的 webpack 配置信息

查看vue cli3项目的webpack配置信息npx vue-cli-service inspect --mode [production|development]导出vue cli3项目的webpack配置信息到文件npx vue-cli-service inspect --mode [production|development] >> fileName

2021-07-06 14:08:52 559

原创 使用lib库模式打包vue组件及组件引用

1、lib库模式打包vue组件语法:vue-cli-service build --target lib --name libName [entry]示例:vue.config.js配置:module.exports = { configureWebpack: { output: { libraryExport: 'default' } }}打包vue组件:npm run lib执行打包命令后,可看到项目根目录下生成了含有vue组件文件的lib目

2021-06-18 11:36:08 8779 2

原创 js算法题

1、如何获取数组的最深层次/*** 获取数组最深层次* @param - arrData : 数组*/function getArrayMaxlevel(arrData) { let maxLevel = 0 function arrayLoop(data, level) { data.forEach(item => { item.level = level if (level > maxLevel) { maxLevel =

2021-05-11 17:09:50 263

原创 js性能优化

1、数据存储的位置会对代码性能产生影响,为避免性能问题,应注意以下几点:1) 变量在作用域中的位置越深,访问时长越长,如若多次调用深层次的变量,可以将该变量赋值给局部变量;2)嵌套的对象成员会影响性能,尽量少用。...

2021-04-29 17:13:17 251

原创 js中对象参数的传递

js中对象参数传递都是按值传递,当参数为对象时,传递的是对象指针,函数中改变对象参数的值时,会影响函数外的该对象。但为对象参数重新赋值时,相当于改变了其指针指向,将其指向了其它内存地址,故自然不会影响函数外的同名对象。示例1:函数内改变对象参数的值,会影响到函数外该对象var person = { name: "Lucy"}function fn(obj){ obj.name = "Lilei"}fn(person);console.log(person.name); // 输

2021-03-28 19:56:31 5120

原创 同一网站下sessionStorage共享问题

最初的时候误认为只要是同一网站下所有页面共享sessionStorage,后来发现事情不是这样的。页面是否共享sesstionStorage与打开方式有关系:通过点击链接或window.open打开的新标签页与当前页面是同一个session;其它方式单独新开页面,会初始化一个新的session,即使同一网站下,他们也不属于同一个session。譬如同一网站下有A、B两个页面,AB页面中均添加key为detail的sesstionStorage(A页面:sesstionStorage.setItem(“de

2021-03-28 18:39:36 2573

原创 history模式的单页面应用刷新后页面404的解决办法

一、问题描述采用history模式的vue的单页面应用,刷新时404。问题分析:vue-router设置的路径不是真实存在的路径,故页面刷新后访问的资源在服务端找不到二、解决办法1、本地调试时,解决404的办法webpack配置文件修改:module.exports = { //... devServer: { historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html }};在devServer里面有个hist

2021-02-01 14:36:12 4318

原创 v-for中key属性的作用

v-for中key属性的值应唯一,起到身份认证的作用,避免v-for“就地更新”的策略。官方说法是:当 Vue 正在更新使用 v-for渲染的元素列表时,(没有key属性)它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。<!-- 示例代码: 没有key属性的v-for

2021-01-21 15:59:37 5154

原创 css实现内容两端对齐

问题描述:因行边缘出现符号或其它情况导致 行边缘出现多余的空白,如何解决内容区域边缘不期望的空白呢?解决办法:用css实现两端对齐,解决行边缘出现的空白问题。text-align: justify;...

2020-12-24 10:29:39 2493

原创 css 缩小图片后,图片变模糊的解决办法

问题描述:样式设置图片宽高后,图片缩小变的模糊了。如何解决图片模糊问题?解决办法:样式表中加入以下样式即可解决img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode:nearest-neighbor;}...

2020-12-08 11:18:25 10080 3

原创 如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观,那么如何限制同一时刻仅出现一个弹窗呢?解决方案:每次弹窗都会出现类名为el-message的元素,通过判断该元素是否存在来限制是否弹新窗。1)创建message.js文件,代码如下:// message.jsimport { Message } from 'element-ui'const showMessage = Symbol('showMessage')class gtMessage { success(options, single=true)

2020-11-17 21:31:08 1846

原创 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中<!-- css --><style> .box-wrap { background-color: red; width: 300px; height: 300px; padding: 20px; } img { width: 100%; position: relative; top: 50%; transform: translateY(-5

2020-11-17 17:56:06 104

原创 vue-router如何在新窗口打开页面

vue-router在新窗口打开页面的方法:let routeUrl = this.$router.resolve({ name: "detail", query: { id: item.id },});window.open(routeUrl.href, '_blank');

2020-11-17 10:40:05 308

原创 vue热更新慢的解决办法

1)安装插件:‘babel-plugin-dynamic-import-node’npm install babel-plugin-dynamic-import-node -D2)修改配置文件:babel.config.jsmodule.exports = { env: { development: { plugins: ['dynamic-import-node'] } }}

2020-10-26 13:36:52 1849

原创 vue多页面应用如何针对其中的某个页面进行单独打包

一、应用场景:多个项目需要用到共同的组件,这时用多页面vue应用再适合不过了。但是这多个项目需要分别部署在不同服务器上,所以需要我们针对每个项目(即每个页面)进行单独打包。二、单独打包某个页面:这里我们以单独打包vue多页面应用中的其中一个页面(detail.html)为示例进行说明。1)创建新的打包模式:新建文件".env.detail"# set ENVNODE_ENV = 'production'# 需要打包的页面PAGE_NAME = 'detail'2)配置打包指令:修改pac

2020-10-26 11:30:10 7256

原创 vue项目依赖文件拆分

需求背景:在构建vue单页面项目时,会将所有依赖打包成一个文件,如果依赖文件过大,会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分,那么如何拆分呢?解决方案:修改webpack的配置文件externals,从输出的依赖文件中排除某些依赖包,将被排除的依赖包单独引入到html页面中。示例:1)webpack配置文件修改externals: { 'vue': 'Vue', 'element-ui': 'ElementUI',}2)去除main.js中element-ui的引

2020-10-22 10:45:52 1001

原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决办法:在路由文件中加入如下代码,即可解决import VueRouter from "vue-router";//pushconst VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (to

2020-10-16 11:02:58 3711

原创 前端实现内容拷贝功能

点击元素实现内容拷贝功能,代码如下:<div id="copyEl" onclick="handleCopy('18288880000')">18288880000</div><script> function handleCopy(data) { var oInput = document.createElement("input"); oInput.style.border = "0 none"; oInput.style.color

2020-10-15 14:37:29 622

原创 IE9浏览器ajax请求error的解决办法

问题描述:网站在chrome、ie10+等浏览器均访问正常,但在ie9中所有跨域的ajax请求都失败,请求直接进入error。解决办法:设置IE9浏览器安全属性,启用【通过域访问数据源】选项;设置完成后需要重启浏览器才能生效。设置步骤如下图:...

2020-10-09 17:11:43 823

原创 window10下navicat11版本过期后如何继续使用

问题:window10下navicat11版本过期后如何继续使用?解决方案:步骤1):首先win+R,输入regedit步骤2):找到目录:HKEY_CURRENT_USER\Software\Classes\CLSID,将该目录下面有info的文件夹删除。如步骤2操作后不起作用,再执行以下操作:找到目录:HKEY_CURRENT_USER\Software\PremiumSoft,删除该目录下的data文件夹。...

2020-10-05 15:43:17 2007 3

原创 如何让网站快速变灰

利用css滤镜,可使网站快速变灰,实现代码如下:html {  filter: grayscale(100%);  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);  -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.

2020-09-03 11:12:26 321

原创 css3前缀自动补全

1、安装自动补全css3前缀的插件:autoprefixernpm install -D autoprefixer2、修改package.json文件// package.json文件部分代码"browserslist": [ "> 1%", "last 2 versions", "ie > 8"]3、添加.postcssrc.js文件//.postcssrc.jsmodule.exports = { plugins: { autoprefixer:

2020-09-01 09:48:16 817

原创 CSS修改浏览器默认滚动条

css修改默认滚动条代码:/*滚动条宽度*/.box-wrap::-webkit-scrollbar { width: 4px;}/*滚动条里面小方块*/.box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*滚动条里面轨道*/.box-wrap::-w

2020-08-28 17:00:40 1084

原创 浏览器页面渲染过程

1、浏览器页面渲染过程图2、浏览器渲染过程分析2.1 CSS加载阻塞DOM渲染,但不阻塞DOM解析有文件test.html,其部分代码如下截图所示:CSS加载阻塞DOM渲染访问test.html页面,通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染,因此起初只看到了页面内容:“Hi,”,其它内容并未渲染出来。CSS加载不阻塞DOM的解析通过控制台可查看,DOM渲染被第一个CSS文件阻塞了,但是该文件后面的其它文件还能正常加载,说明CSS不阻塞DOM解析...

2020-08-27 15:51:47 225

原创 el-menu实现多级菜单效果

如何用element-ui的el-menu组件动态实现多级菜单?1)创建menuTree.vue组件<!--menuTree.vue--><template> <div class="gtd-menu-tree"> <template v-for="(item, index) in data"> <el-submenu :key="index" v-if="item.children && item.chil

2020-08-25 13:07:28 4690

原创 sentry-前端应用监控工具

一、sentry介绍:Sentry 是一个开源的实时错误追踪系统,可以帮助开发者发现问题、追踪问题;支持 web 前后端、移动应用等。了解更多信息,请移步sentry官网二、sentry配置1、注册sentry账号使用sentry监控平台,必须先申请账号2、登录sentry网站,重设语言和时区1)点击账号旁的箭头,打开弹出2)点击账号弹窗中的"User settings"选项,进入账号设置页面,可设置语言、时区3、配置项目1)点击‘项目’菜单,进入项目页面,创建自己的项目,这里我们以

2020-08-21 16:18:11 4558

原创 mockjs拦截请求,生成假数据

在前后端分离的时代,前端开发不再过渡依赖于后端。在接口未开发的情况下,前端可以依据约定好的接口进行开发,借助mockjs拦截请求,制造假数据进行响应。1、mockjs安装npm install mockjs2、mockjs配置mockjs语法规范详见:https://github.com/nuysoft/Mock/wiki/Syntax-Specification1)mock文件配置(mock/index.js)const Mock = require('mockjs')// 接口配置co

2020-08-21 13:32:29 2134

原创 npm 查看包的版本

用npm安装包时,想知道该包的版本有哪些,以便于从中选择某个版本安装。那么如何查看包的版本呢?一、查看远程仓库版本1、查看包所有版本语法:npm view [软件包名] versions# 查看docker的所有版本号npm view docker versinos2、查看包的最新版本语法:npm view [软件包名] version# 查看docker的最新版本号npm view docker version3、查看包的更多版本信息语法:npm info [软件包名]# 查看

2020-08-18 12:27:39 10931

原创 vsCode中编辑Markdown文档

vsCode原生支持markdown语法,新建一个README.md文件,vsCode会根据后缀.md自动识别并启动markdown编辑。vsCode实时预览点击vsCode面板顶部的预览图标(以下截图中红框圈起的图标),可打开预览面板。实时编辑查看预览效果,如下截图所示:Typora生成文件利用Typora可编辑文档,也可将md文件导出成pdf、html等文件。...

2020-08-18 11:15:44 2227

转载 YAHOO 35条前端优化建议

转载自:http://www.360doc.com/content/14/0325/14/15727046_363598248.shtmlYahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳:Best Practices for Speeding Up Your Web Site,Excetional Performance.

2020-08-17 11:39:55 368

原创 移动端适配方案postcss-px-to-viewport

做移动端适配可以用viewport单位,postcss-px-to-viewport可将px单位自动转换成viewport单位。1)利用npm安装postcss-px-to-viewportnpm install postcss-px-to-viewport --save-dev2)配置文件:postcss.config.jsmodule.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": {

2020-08-07 10:03:21 5734

原创 vsCode常用插件

gitLens-源代码管理插件点击代码行,可查看当前行的修改信息(修改者、修改时间等)

2020-08-02 21:09:19 177

原创 npm配置淘宝镜像

长久设置npm镜像用npm config set 命令设置镜像,一次设置后,长期有效。# 设置淘宝镜像npm config set registry https://registry.npm.taobao.org # 查看淘宝镜像npm config get registry# 从淘宝镜像中下载资源包npm install临时设定npm镜像用–registry参数设置镜像,仅设置时生效。# 从淘宝镜像中下载资源包npm install --registry=https://reg

2020-08-02 20:50:56 276

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除