- 博客(42)
- 收藏
- 关注
RSS订阅原创 修改el-select右边的icon图标
修改el-select右边的icon图标前言效果图代码前言遇到了需要改el-select右边小图标的样式，记录一下。效果图代码用背景图也可以用饿了么的icon，如下图.el-select .el-input .el-select__caret.el-icon-::before { content: ""; background: url(../../../../assets/images/inputIcon.png) center center no-repeat; posit
2021-07-14 19:59:39
6478
3
原创 git常用命令
git常用指令前言git命令在开发中经常用到，现在就来整理一下常用的git命令。获取git配置信息：git config --list初始化仓库：git init查看文件状态：git status克隆仓库：git clone添加文件到仓库：git add提交备注：git commit -m “提交备注”回退版本：git reset删除工作区文件：git rm查看历史提交记录：git log从远程拉取代码库：git fetch拉取远程代码：git pull上传代码到远程仓库：g
2021-06-12 13:21:32
114
原创 总结：vue父子传参的方式
vue父子传参的方式前言父传子子传父路由传参$refs前言做个小总结，也等于回顾一下知识吧，vue的传参方式。父传子props，例//父组件<children :id="1"></children>//子组件<script> export default { props: { id:{ type: Number, default: 0, } } }</script>$childre
2021-04-14 17:16:54
433
1
原创 堡垒机 ssh 修改服务器文件
堡垒机 ssh 修改服务器文件前言操作前言线上系统出了bug，遇到了领导演示，需要快速处理，这又是一个老项目，打包很慢，就把本地改好的代码，复制粘贴到服务器的文件上，一般情况是不建议这样操作的，记录一下操作步骤，方便以后查看。操作登录堡垒机cd +路径 //进入需要修改的文件夹ls //查看文件夹内容vi + 文件名 //查看文件内容i //insert，编辑模式//可以开始编辑拉，修改完之后esc //进
2021-04-06 16:51:26
719
原创 百度地图绘画行政区域
百度地图绘画行政区域因为有个需求是要用在线地图只展示市的行政区域，还有ui设计的样式，所以只能自己绘画了。效果图：上代码<baidu-map ref="baiduMap" class="map" :center="mapCon.center" :zoom="mapCon.zoom" @ready="handler" @touchend="mapTouchend"> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIG
2021-02-25 17:34:10
2554
1
原创 vue-cli@4.3.0-引入arcgis
vue项目引入arcgisvue-cli@4.x创建项目引入arcgis引入arcgis_js_api，放在public静态资源文件夹里修改两个文件1.init.jsbaseUrl:"/library/3.30/3.30/dojo"2.dojo.jsbaseUrl:"/library/3.30/3.30/dojo"或者可以直接获取浏览器地址栏的ip和端口，拼接上去;let url = window.location.origin;baseUrl:`${url}/library/3.30/
2020-12-30 16:39:48
315
1
原创 vue-cli@4.3.0请求json
vue-cli@4.3.0请求json前言请求本地的json文件前言vue-cli@4.x创建的项目，就没有static文件夹了，静态资源文件放在public文件夹里。请求本地的json文件把json文件放public文件夹里，通过axios请求this.$axios.get(’/test.json’)ps:如果有拦截器的，对返回格式有要求的，json文件用对应的格式。如果是vue-cli@2.x把json文件放static文件夹里，通过axios请求this.$axios.get(‘st
2020-12-30 16:23:56
99
原创 mpvue的生命周期
mpvue的生命周期mpvue有着vue和小程序的生命周期，弄清楚它们的执行顺序很重要在控制台输出一下就知道它们的执行顺序 created() { console.log('page index created') }, mounted() { console.log('mounted') }, onLoad() { console.log('page
2020-11-03 11:19:54
339
原创 mpvue引入第三方ui库-vant Weapp
mpvue项目引入第三方ui组件，这里我用的是vant Weapp举栗子下载组件在github上下载压缩包下载地址：https://github.com/youzan/vant-weapp下载完之后，解压，把里面dist重命名为vant，然后把整个文件夹放到mpvue项目中dist文件夹内然后在路由的文件引入 src/router/router.jsmodule.exports = [ { path: '/pages/login/index', name
2020-11-03 11:06:05
529
1
原创 mpvue项目中一些小坑
v-for必须加key属性，否则编译不了v-for只有一个参数时，不能加括号()，否则报final loader didn’t return a Buffer or String编译失败小程序image标签没有width、height属性，这样写无效<img width="80px" height="80px" />v-if条件，不能写太复杂，这样写会报错<div v-if="obj !={}"></div>子组件传参，不能传对象不支持document.
2020-11-03 10:51:31
208
1
原创 微信小程序封装fly.js请求
封装fly.js请求flyio文档地址：https://wendux.github.io/dist/#/doc/flyio/interceptor添加链接描述使用前先下载依赖$ npm install flyio直接贴代码var Fly=require("../miniprogram_npm/flyio/index") var fly=new Flyfly.config.baseURL="http://11.11.111.111:8888/api/"fly.config.timeout=1
2020-11-03 10:38:55
678
1
原创 mpvue-axios封装
axios封装import axios from 'axios'import qs from "qs";const BASEURL = process.env.BASEURL;const service = axios.create({ timeout: 50000 // request timeout})service.defaults.adapter = function (config) { return new Promise((resolve, reject) =>
2020-11-03 10:26:02
291
1
原创 mpvue中使用echarts
mpvue中使用echarts安装依赖$ npm install echarts$ npm install mpvue-echarts我把它封装成了一个组件<template> <div :class="className" :style="{height:height,width:width}" > <mpvue-echarts lazyLoad :echarts="echarts" :onInit="ecBarInit" canvasId="lin
2020-11-03 10:00:36
1364
原创 mpvue项目中使用vue-router
mpvue项目只用vue-routervue项目都是使用vue-router的路由跳转，而小程序中是不能使用vue-router，这时候就需要一些插件要完成在mpvue中使用vue-router.mpvue-entrympvue-entry：集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面的热更新。mpvue-router-path在mpvue中使用vue-router兼容路由写法，npm地址：https://www.npmjs.com/package/mpvue-router
2020-11-03 09:49:48
937
原创 vue项目转小程序-mpvue项目创建
vue项目转小程序-mpvue项目创建前言创建mpvue项目前言这次遇到了要拿很久之前用vue写的移动端项目，改成小程序的要求。因为本人只会用原生的开发微信小程序，所以这次也是学习了一下mpvue，现在来总结一下。创建mpvue项目mpvue是美团开源的项目，先贴上官方地址：http://mpvue.com/创建项目前先检查一下node和npm是否安装好，然后开始安装vue-cli脚手架，注意，这要2.x版本的，3.x版本的创建不了。$ npm install --global vue-cli@
2020-11-03 09:15:13
3075
原创 vue多页面ssr服务端渲染之nuxt.js-基本配置
vue多页面ssr服务端渲染之nuxt.js-基本配置前言vue是单页面的项目，当然它也可以用nuxt.js构建多页面的项目，也就是服务端渲染，下面就简称SSR了。SSR是什么呢？其实就是后端把.vue文件编译成.html文件返回给前端渲染，它的好处就是有利于SEO（搜索引擎）。基本配置这篇文章就是讲讲简单的配置项，后续还有其他nuxt.js文章。1.配置ip和端口一般怕端口被占用就配置端口吧，或者想同事访问你的前端项目，可以配置ip。不配置的默认http://localhost:3000在
2020-09-23 17:36:41
1236
原创 前端在线预览word,excel,pdf
前端在线预览word,excel,pdf预览Word预览pdf预览Excel预览Word微软的在线预览功能，可以预览word、ppt、Excel、PDF局限：需要外网能访问文件，如果是只能内网用的系统就不适合了XDOX预览局限：需要外网能访问文件，如果是只能内网用的系统就不适合了通过mammoth.js转成html，局限：只能转docx格式的文件，复杂样式会被忽略后端转html格式给前端渲染难题都给后端了，没啥局限预览pdfjquery.media.js （兼容IE）
2020-09-23 16:29:34
4116
原创 vue 引入 阿里巴巴矢量图标库iconfont
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法前言开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。选择字体图标打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/在官网里面选择自己想要的字体图标把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。把购物车里的字体图标加入项目中选择好字体图标后，把购物车里的字体图标加入项目中。
2020-08-31 11:10:39
1281
原创 npm构建微信小程序
npm构建微信小程序从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。而且用npm下载一些第三方插件，开发起来也比较方便。创建项目先下载微信开发者工具，这个就自己去官网下载吧，我选的是稳定版，这个就看你们各自的需求了。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载完之后，扫码登录自己的微信号，然后就可以创建一个
2020-08-15 18:10:18
588
原创 小程序双向数据绑定
小程序双向数据绑定前言小程序的input是单项数据流，不像vue的双向绑定那么好用。<van-field model:value="{{ name }}" label="姓名" placeholder="请输入姓名" border="{{ false }}" required error-message="{{rule.name}}" />注意这里的model:value的变量只能是data里面定义的，不能是对象
2020-08-14 17:44:32
1810
原创 微信小程序低版本兼容async/await，regeneratorruntime is not defined
前言用过async/await组合就知道，比promise好用，但是微信小程序比较新的版本才兼容，微信7.0.11及以下的版本的不兼容，会报错。不过可以用facebook提供的regenerator-runtime，可以解决这个问题。下载依赖npm i regenerator-runtime引入文件在使用async/await的页面的index.js引入import regeneratorRuntime from 'regenerator-runtime'然后在源文件还要删掉一段代码，
2020-08-14 16:24:55
607
2
原创 微信小程序 拨打电话功能
微信小程序 拨打电话功能微信官方文档用法微信开发工具的模拟器效果微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html用法wx.makePhoneCall({ phoneNumber: '13530242280', success:res=>{ console.log(res) }, fail: f
2020-08-14 10:10:00
880
原创 vue px转rem，样式自适应各个分辨率
vue px转rem在项目中，常常会需要页面样式自适应各个分辨率，我的项目一般需要适应1440 * 768至1920*1080 125%的分辨率。因为我们拿到的设计图都是1920 * 1080的，一般都是用px写的，如果是vue项目可以创建项目的时候加上postcss-pxtorem，这样会自动把px编译成rem，不用像传统的html项目，用@media写多套样式了。按照正常流程，当然是先下载依赖啦npm install amfe-flexible --savenpm install postcs
2020-08-01 11:56:48
3497
2
原创 vue播放m3u8格式视频
vue播放m3u8格式视频之前播放视频，直接用的h5的video标签，把地址复制给src就可以直接播放了。但是那个是要mp4格式的，现在的视频是m3u8格式的，播放不了，查了下资料，可以用video.js解决这个问题。vue的使用方法安装依赖npm install --save video.js；npm install --save videojs-contrib-hls在main.js引入全局样式和js文件，也可以在组件局部引入样式，这个看自己的需求import 'video.j
2020-08-01 11:40:23
5577
12
原创 vue 路由hash和history的区别
这里写自定义目录标题hashhistory结言hashurl中#符号本身及其后面的都是hash，http请求并不包括hash部分。vue源码中是通过window.location.hash改变路由，会在浏览器的访问历史中增加一个记录。监听hash：window.addEventListener(“hashchange”, fun, false);$router.push():windo...
2020-04-25 22:38:09
604
原创 vue-cli 3.x 项目打包配置-vue.config.js
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
2020-04-14 17:31:32
4060
转载 vue-cli4.x创建项目
前言之前都是用vue-cli2.9.3开发的，现在终于有空来升级一下了，刚刚下载的版本是vue-cli4.3.1。下载之前要先卸载以前的vue-cli2.x,npm uninstall vue-cli -g或者yarn global remove vue-cli卸载它卸载完之后，在下载vue-cli4.x如果你用npm下载失败了，如上图所示，不要慌，可能是你的网络太差了而已，因为npm...
2020-04-10 17:31:47
1085
原创 echarts-liquidfill实现温度计样式
echarts-liquidfill实现温度计样式因为项目需求，要用温度计的样式展示百分比，就找到了echarts-liquidfill，更详细的使用方法请参考npm管网：https://www.npmjs.com/package/echarts-liquidfill需要依赖echarts和echarts-liquidfill，版本最好对应，不然可能报错。可以用npm下载或者yarn下载，...
2020-04-01 16:28:30
1046
原创 封装vue组件上传到npm库
先去npm官网注册一个账号，因为上传的时候需要账号、密码、邮箱。网址：https://www.npmjs.com/package/npm自己封装一个组件需要安装 node.js -v8+和vue-cli@2.0版本先创建一个项目在你想要存放的文件夹，打开cmd窗口，输入下面命令vue init webpack-simple <project-name>//这个是项...
2019-06-23 15:25:18
2518
原创 防抖与节流
1.原理函数防抖：当持续触发事件时，一定时间内没有再触发事件，事件处理才会执行一次，如果设定时间的到来之前，又触发了事件，就重新开始延时2.函数节流：当持续触发事件时，保证一定时间内只调用一次事件处理函数防抖与节流的应用场景防抖节流search搜索，用户在不断输入值时，用防抖来节约请求资源鼠标不断点击触发，mousedown（单位时间只触发一次）window触发...
2019-05-22 14:26:37
201
原创 前端面试算法题
一、不借助临时变量，进行两个整数的交换//方法一 ES6 var a = 1, b = 2; [a,b] = [b,a]; console.log(a,b) // 方法二 异或运算，同为0或者同为1都为0,10为1 var c = 3, d = 4; c = c ^ d; d = c ^ d; c = c ^ d; console.log...
2019-05-18 23:33:17
1148
原创 洗牌函数
最近写音乐播放器，有个随机播放模式需要随机播放列表，这里记录一下经典的洗牌函数 <h2>原数组：1，2，4，5，6，7，8，9</h2> <h1>随机数组： <span id="new"> </span> </h1> <script type="text/javascript">...
2019-05-01 15:11:52
1226
3
原创 浅谈前端网页性能调优
代码调优减少时间复杂度和空间复杂度时间复杂度可以简单理解为CPU的计算时间空间复杂度可以理解为占用的内存找对象属性的时间复杂度是O(N)减少重绘重排重绘重排：修改CSS的属性（color,width,height,etc）批量修改DOM操作减少全局变量，把全局变量存储在局部变量中因为全局变量是挂载到window对象上的，一旦调用全局对象，就会去查找window的所有属性，直到...
2019-04-30 21:18:01
370
原创 补零函数
补零函数方法一： h = h < 10 ? '0' + h : h; m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; this.count_down = `${h}：${m}：${s}`;补零函数方法二：_pad (num, n=2) { ...
2019-04-29 21:02:12
1506
原创 Node.js入门
http作为服务端Node.js模块化规范，common.js，引入模块用require,不可以用es6的importserver.js代码如下：开启服务，server模块const http = require('http');//node中的服务都是继承eventemit//开启服务的第一种写法，createServer方法var server = http.creatSer...
2019-04-28 18:55:51
222
原创 应届生前端面试题01
this指向问题<script> var fai = '足球俱乐部'; var obj = { fai:'更强的', exec:function(){ return (function(fai){ return function(){ console.log(this.fai);//足球俱乐部 consol...
2019-04-26 12:29:05
3091
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人