- 博客(21)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue2.*+elementUi2.15.*打包后找不到字体和图标库的解决方法
vue2.*+elementUi2.15.*打包后找不到字体和图标库的解决方法
2022-02-25 20:38:02
624
原创 解决nvm下载安装node后npm安装失败且不能使用的问题
因项目需要安装多个node版本，当用nvm安装node版本的时候会自动安装npm，但是有时候会安装失败，导致npm不能用，大概率是因为npm下载的时候失败了。所以nvm install之前，先修改到淘宝源，然后再安装node，代码如下：nvm uninstall [版本号] // 如果安装失败了，要先卸载刚刚安装的node，没安装的话可以不执行这行命令nvm npm_mirror https://npm.taobao.org/mirrors/npm/ // 修改到淘宝源nvm install [版本号
2021-06-18 11:37:24
3397
原创 vue的自定义alert插件
目录结构：mAlert.vue的代码：<template> <div id="mAlert" v-show="showAlert"> <div class="box"> <p>{{config.txt}}</p> <div> <span @click="ok()">{{config.okTxt || '确定'}}</span> <sp
2021-05-07 23:20:51
543
原创 vue项目使用require.context引入某文件夹下的所有模块
我们用vue开发的有时候需要引入某文件夹下的所有模块(示例用的vue2)，比如api.js，项目里有很多接口，这时如果手动一个一个引入的话不仅容易出错而且在多人协作开发的时候容易冲突，这时候就需要下面的代码来一次引入。下图是文件目录截图：如图所示，文件夹m>js下有a、b、c、d四个js，我们想在文件夹m下的index.js里引入这四个js然后export，方便其他地方引入。通常写法是在index.js里import那四个文件，然后export里面解构一下，这种写法也行，但如果要引入的文件有40
2021-05-07 22:33:13
1373
原创 npm安装同一个包的不同版本，以echarts为例
npm安装同一个包的不同版本，以echarts为例npm install echarts4@npm:echarts@4npm install echarts5@npm:echarts@5上面代码是安装echarts4和5两个版本，分别命名为echarts4和echarts4安装完成后package.json里的依赖会写进去如下代码："echarts4": "npm:echarts@^4.8.0","echarts5": "npm:echarts@^5.0.2",这就表示项目里成功安装了ec
2021-03-08 17:03:52
6882
原创 vue2按需引入iviewui的部分组件报错error in ./node_modules/view-design/src/directives/v-click-outside-x.js
今天使用vue按需引入iviewui的Select、Table、Page等组件，控制栏报错error in ./node_modules/view-design/src/directives/v-click-outside-x.js。排查各种原因后解决方法如下：第一步：babel按照iviewui官方的按需引入来配置transform-vue-jsx和transform-runtime是vuecli自动创建的，第3个是iviewui官方引入配置"plugins": [ "transform-v
2021-02-05 18:17:37
897
原创 css美化滚动条代码，限webkit内核
css美化滚动条代码，限webkit内核::-webkit-scrollbar { width: 6px; height: 6px;}::-webkit-scrollbar-track { width: 6px; background: rgba(16,31,28, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}::-webkit-scrollbar-th
2020-12-25 15:11:13
111
原创 js函数柯里化
函数柯里化，相当于把函数的多参变成单参。// fn(2,3,4); ===> fn(2)(3)(4);举个栗子，给一个函数，接收a,b,c三个参数，返回乘积。一般函数写法：function fn1(a,b,c) { return a*b*c;} console.log(fn1(1,2,3)); // 6柯里化写法：function fn2(a) { return function (b) { return function (c) { return a*b
2020-12-24 14:44:20
106
原创 一行js获取随机颜色代码
js获取随机颜色代码const randomColor = "#"+('00000'+((Math.random()*(1<<24))<<0).toString(16)).slice(-6))
2020-12-24 14:40:45
130
原创 js函数防抖和函数节流
话不多说直接上代码：js函数防抖：多次触发事件，只有最后一次执行function debounce(cb, delay){ var t = null; return function () { clearTimeout(t); t = setTimeout(cb , delay) } } window.onscroll = debounce(function (){ console.log(1); // 滚动事件完成500毫秒之后执行1次
2020-10-26 11:19:48
72
原创 h5移动端播放amr格式的音频文件兼容安卓IOS
基于amr.js和RecorderJs播放 AMR：var amr = new BenzAMRRecorder();amr.initWithUrl('path/to/voice.amr').then(function() { amr.play();});amr.onEnded(function() { alert('播放完毕');})播放本地文件：<input type="file" id="amr-file" accept=".amr">var amr = new
2020-09-25 16:14:49
1885
3
原创 解决h5移动端布局有垂直滚动条，底部fixed定位元素在IOS下定位失效，跟随滚动条滚动的问题
h5移动端经常会有固定在底部的按钮这种布局惯用的就是给底部元素fixed定位，然而在IOS下，如果内容很长有滚动条，滚动的时候fixed定位的元素会跟随滚动，特别是当蓝色内容部分有input元素的时候更容易出现跟随滚动的现象，安卓下无此现象。解决办法：禁止html滚动，给蓝色框添加滚动条，这样内容就在蓝色框里滚动，红色框absolute定位在底部即可。记得给蓝色框一个padding-bottom高度大于等于红色框高度即可，这样给红色框留出位置，不然最下面的内容会被红色框遮挡。上代码：<!D
2020-09-23 01:49:50
3350
1
原创 js new Date()方法在移动端安卓和IOS下的兼容性
放一个兼容安卓IOS的格式代码let str = "2020-09-22 18:45:03"str = str.replace(/\-/g, "/") // 将短横线连接符替换为斜杠，以兼容安卓和IOSnew Date(str)安卓下支持2020-09-22 18:45:03和2020/09/22 18:45:03IOS下支持2020/09/22 18:45:03所以使用new Date(时间)的时候，最好用2020/09/22 18:45:03这种格式...
2020-09-22 23:42:20
379
原创 将网站页面变灰的css，IE低版本不支持。
<style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:grayscale(100%); -moz-filter: graysca...
2020-04-06 21:40:51
434
原创 vue项目npm run build打包优化
vue项目npm run build打包优化1、使用scirpt标签2、删除map文件3、Gzip 文件压缩我的当前版本信息：操作系统：win10_64位node：v12.13.1npm：6.12.1cnpm：6.1.0webpack：3.12.0vue-cli：2.9.61、使用scirpt标签npm run build 命令打包时默认会把 package.json文件里dep...
2019-12-01 22:15:24
2114
原创 centos7安装nginx与nginx配置文件
1、安装环境或依赖，在根目录下操作即可yum install gcc-c++ //nginx源码编译需要yum install -y pcre pcre-devel //nginx 的 http 模块使用 pcre 来解析正则表达式yum install -y zlib zlib-devel //nginx 使用zlib对http包的内容进行gzipyum install -y op...
2019-11-26 10:51:45
477
原创 使用nginx给vue开发环境的地址自定义一个域名
使用vue-cli开发的时候，npm run dev生成的默认链接是http://localhost:8080，看上去很不爽，于是就尝试使用nginx反向代理给这个链接取个自定义域名，还真成功了，话不多说直接上代码：1、修改host。文件：/config/index.js host: '127.0.0.1', port: 8080，2、禁用webpack的hostCheck...
2019-11-22 16:04:12
814
原创 解决vue2.*开发环境下报错Invalid Host/Origin header，[WDS] Disconnected!
vue2.*在dev环境下，打开链接后控制台一直刷报错如下图：解决办法：第一步：修改根目录下/config/index.js文件内的host值为’127.0.0.1’第二步：修改根目录下/build/webpack.dev.conf.js文件内的devServer，在devServer下增加一行：disableHostCheck: true,第三步：重新启动dev以下是我修改成功后的代...
2019-11-22 15:42:44
2421
原创 vue2.*路由懒加载代码示例
vue2.*路由懒加载代码示例以下代码是vue项目src/router/index.js的内容，要使用懒加载的组件，使用views方法引入即可。import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld' // vue-cli自动生成的cons...
2019-11-16 15:42:44
277
原创 H5移动端rem适配的js方法，1rem=100px
H5移动端rem适配的js方法，1rem=100px使用这个方法适配后，1rem=100px。假如设计图上有个字体大小是36px，那么开发的时候写这个字体大小就写0.36rem。方法：function rem(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, ...
2019-11-14 14:53:04
2517
原创 H5移动端input元素在IOS下的setTimeout内无法获取焦点
H5移动端input元素在IOS下的setTimeout内无法获取焦点移动端在setTimeout里设置input获取焦点在ios下是无效的，这里是个坑！移动端在setTimeout里设置input获取焦点在ios下是无效的，这里是个坑！下面是js代码和效果截图，有兴趣的可以扫码亲测一下，若有填上了这个坑的，请多指教！$('button').on('click', function () {...
2019-11-13 18:13:27
810
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人