- 博客(51)
- 收藏
- 关注
RSS订阅
原创 使用vue-cli3开发项目，module.export为undefined，导致第三方库fecha无法使用
1.引用`import fecha from “…/…/utils/date.js”，一直报错。2.调试date.js发现module.export为undefined，不走第一条件句。 if (typeof module !== 'undefined' && module.exports) { module.exports = fecha; } else if (...
2019-10-24 10:37:46
2653
原创 动手搭建一个类vue文档风格博客VuePress
[[toc]]前言本文基于VuePress1.x版本。VuePress由两部分组成：一个极简静态网站生成器，界面十分简洁，容易上手；为书写技术文档而优化的默认主题，为了支持Vue及其子项目的文档需求。它是如何工作的一个VuePress网站是一个由Vue、Vue Router和Webpack驱动的单页应用。在构建时，创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染...
2019-09-05 11:51:50
582
原创 git操作清单
版本控制git本质是一个分布式版本控制系统，客户端可以完成clone整个仓库，然后进行提交和修改。一、了解github的工作流仓库远程仓库(remote)：远程主仓库github；本地仓库(respository/history)：.git文件夹里还包括git自动创建的master分支，并且将HEAD指针指向master分支。使用commit命令可以将暂存区中的文件添加到本地仓库中...
2019-08-23 17:43:04
502
原创 vue自定义指令
自定义指定的注册方法分为全局注册和局部注册，比如注册一个v-focus的指令，用于input、textare元素初始化时自动获取焦点。// 全局注册Vue.component('focus', { ...});// 局部注册var app = new Vue({ el: '#app', directives: { focus: { ... } ...
2019-07-17 15:22:18
95
原创 如何通过动态更改vue中的样式？
通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖，它主要用法是动态更新HTML元素上的属性。绑定class的几种方式1.对象语法给v-bind:class设置一个对象，可以动态地切换class。例如：<div id="app"> <div :class="{'active': isActive}">&...
2019-07-17 10:57:38
2172
原创 js继承es5、es6的7种方式
构造函数、原型对象1.构造函数function A(name) { this.name = name; this.arr = [1]; this.say = function(){ console.log('hi') }}注意：数组和方法都属于”实例引用属性“，但是数组强调私有、不共享的。方法需要复用、共享；在构造函数中，一般很少有数组形式的引用属性，大部分情况都是：...
2019-07-15 16:07:14
303
原创 vue-cli3创建项目（1）
创建项目1.打开新的终端 / 命令行窗口。2.使用命令npm i -g @vue/cli。3.运行完后输入命令vue ui，浏览器上自动打开http://localhost:8000地址。4.浏览器打开显示:5.点击创建6.手动配置项目7.选择功能，可以引入babel、TypeScript、Progressive Web App（PWA）Support、Router、Vuex等功...
2019-07-12 16:09:36
582
原创 element-ui插件datepicker日期选择器控制选择时间范围
单日期选择器1.今天以及今天之后的日期<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker><script>export ...
2019-05-24 17:46:25
6961
1
原创 vue-cli3 适配移动端rem
使用vue-clinpm install -g @vue/cli // 使用vue-cli3版本自定义功能配置TypeScriptTypeScriptProgressive Web App (PWA) SupportRouterVuexCSS Pre-processorsLinter / FormatterUnit TestingE2E Testing...
2019-05-17 17:48:30
6150
原创 vue-cli3 使用svg-sprite-loader的使用
1.为什么使用svg-sprite-loader？用来根据导入的svg文件自动生成symbol标签并插入html，接下来就可以在模板忠方便地使用svg-sprite技术了通常我们项目都是使用iconfont阿里巴巴图标矢量库，缺点：操作繁琐，每次ui需要加一些新的图标的时候，都要重新下载图标库的项目，然后把整体的文件（其中包括css,svg,ttf,woff等）替换掉。如果更改名称的...
2019-05-13 11:00:56
2923
原创 vue-cli 统一封装axios，使用拦截器统一出来请求前和请求后处理
Axios是基于Promise机制实现的异步的链式请求框架。体积小，源码易懂。非常适合做基础的请求库。拦截器的作用，在请求钱对发送的数据、逻辑进行处理，或者在响应后对响应数据做处理。请求前处理配置相同的请求数据，如headers、token添加loading效果1.axios的封装1.使用vue-cli创建项目首先在vue-cli项目的src路径下新建utils和api文件夹，在u...
2019-05-10 09:35:13
4653
5
原创 vue中使用编辑器vue-quill-editor踩过的坑
结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。引入elem...
2019-03-20 18:04:40
18912
2
原创 MongoDB 学习
**什么是MongoDB？** MongoDB是一个基于分布式文件存储的数据库。由C++语言编写，意在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值...
2018-11-05 15:47:45
238
原创 CSS3常见一些属性
1.-webkit-text-size-adjust pc端小于12px的文本会被浏览器强制以12px显示，通过CSS属性-webkit-text-size-adjust:none；html{-webkit-text-size-adjust: none;} 但是在移动设备上如手机和平板上横屏和竖屏会导致字体变大，-webkit-text-size-adjust: 100%禁止字...
2018-10-26 11:36:07
388
原创 iPhone X适配 webpage
屏幕尺寸iphoneX的适配——安全区域（safe area）safe area确保不会被设备圆角（corners），传感器外壳（sensor housing，齐刘海）以及底部的Home Indicator遮挡一.顶部通栏 之前的版本采用状态栏20pc+导航栏44pt，iphone X做全面屏并多一块小刘海，因此iphone单独采用状态栏44pt+导航栏44pt，...
2018-10-26 10:42:29
309
原创 vue中使用element-ui监听键盘事件，input只能输入纯数字
1.element-ui的input监听事件 vue中element-ui在使用el-input的时候，由于el-input在输入框的外层添加了一层的<div class="el-input"></div>，把input隐藏在子级，所以el-input添加上了keyup无响应；<el-input v-model="id" placeholder="ID" ...
2018-09-30 09:29:59
26944
4
原创 ios时间转时间戳出现invalid Date
在ios上无法读取new Date('2018-08-09 11:59:59')，但是在Android是可以用的。方法一var endTime = new Date('2018/08/10 11:59:59')alert(endTime.getTime())方法二varendTime = new Date("Jan 1, 1970 00:00:00")console.l...
2018-08-10 10:52:04
3013
1
原创 vue element-UI table嵌套表格 无法更新视图
1.点击“编辑”，当前的div显示“删除”；2.查看row.isShow = true，但是视图没有更新；代码如下：<template> <el-table :data="tableData4" style="width: 100%" max-height="250"> <el-table-column fi...
2018-08-07 19:36:37
8477
原创 微信分享朋友、朋友圈、QQ、QQ空间
1.准备工作 APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置（必须是通过备案）。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意：支持使用AMD/CMD标准加载方法<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></scrip...
2018-08-07 15:54:13
646
原创 使用webpack4 兼容ios8 自动添加前缀
最近写了移动端的项目，没有考虑到要兼容ios8。flex布局和css3的transform等没有起到作用。Safari是用webkit内核，需要增加一些前缀，才能起到作用。用webpack构建css样式的时候，使用postcss-loader加载器去做自动加载前缀。 flex布局，添加前缀：display: flex;display: -webkit-flex; justif...
2018-07-24 20:56:10
1392
原创 移动端rem布局，加载瞬间页面缩小
在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。 在完成整个页面的时候，我们在手机就看到了加载元素会先变小后恢复正常。1.js加载顺序与加载方法 页面加载顺序通常是“从上往下”加载的，所以把上面这段代码发在head内，但还是出现上述问题。在网上也查找一些资料，换成原生写法，优化加...
2018-07-07 20:36:18
3928
2
原创 mac下安装PHP扩张phpredis
下载php-redis，下载地址：点击打开链接下载得到phpredis-master.zipsudo make install移到/usr/local/目录中sudo cp phpredis-master /usr/local/进入/usr/local/目录下cd /usr/local/解压phpredis-master.ziptar -zxvf phpredis-master.zip得到phpr...
2018-07-07 16:37:21
476
原创 mac系统配置LNMP环境
由于工作的需要，这几天在mac上安装LNMP开发环境，安装了好几天了。后面才了解到mac有自带的php，由于版本过低，重新安装了7.0.30的版本1.安装Homebrew homebrew是mac系统下的软件包管理工具，非常方便在mac上进行安装或者卸载软件$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/...
2018-07-05 09:43:55
1174
原创 mac下webpack4 配置
环境：mac操作系统node1.安装webpack npm由于连接是国外的网站，运行速度要稍微慢些，可以用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org全局安装webpack、webpack-cli、webpack-dev-server。cnpm install webpack webpack-cli webp...
2018-06-28 17:08:59
1064
原创 使用js把Unix时间戳转化成普通日期
方法一：var time = 1523141099;var unixTimestamp = new Date(time*1000);var commonTime = unixTimestamp.toLocaleString()方法二Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth...
2018-06-07 11:40:54
7818
原创 移动端web如何在真机上进行调试
在做移动端页面的时候，在chrome的手机模拟器上进行模拟测试界面。但是在真机上打开页面的时候，却出现界面或者是功能上的bug。所以我们做完移动端页面的时候，不妨先用真机进行调试本地手机页面。 主要介绍使用过的两种方法1.Fiddler代理调试 Fiddler是一个web调试代理，能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据。下载安装Fiddl...
2018-04-27 15:12:10
9242
1
原创 echarts饼图实例
1.引入jquery文件2.引入echart文件在html页面中给id为echartsPie的div宽和高度echarts初始化echarts的optionseries中的data设置最终效果图
2018-04-17 17:28:48
1343
原创 echart百度图表使用方法
最近几个项目都是有关图表，在国内echart和国外highchart比较，还是比较倾向于使用echart做可视化，echart是完全开源，配置项文档非常详细。创建html文档，设置好DOM，给节点设置width和height步骤1引入echart.min.js文件步骤2配置echarts和折线图步骤3（1）require.config是用来设置echarts的配置文件，配置好本地echarts文件...
2018-04-13 16:47:48
4863
原创 vue 12种通信方式
Vue组件间的通信方式1. props传递数据在父组件中使用儿子组件<template> <div> 父组件:{{mny}} <Son1 :mny="mny"></Son1> </div></template><script>import Son1 from "./Son1";expor...
2019-08-14 11:52:45
336
原创 移动端兼容性问题集
1.input获取焦点时，页面被放大// ios全屏<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0...
2019-08-12 15:33:19
876
原创 Meta标签
Meta标签是HTML语言head区的一个辅助性标签。它位于HTML文档头部的head标记和title标记之间，它提供用户可不见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。1.声明文档使用的字符编码<meta charset="UTF-8"/>或<meta http-equiv="Content-Type" ...
2019-07-18 14:11:48
139
原创 webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function
1.使用vue-cli3，打包产生的问题；解决方案：npm i htnl-webpack-plugin@next参考https://github.com/jantimon/html-webpack-plugin/issues/1068
2019-05-31 14:59:01
3658
2
原创 设置、获取、删除cookie
// 设置cookiefunction setCookie(name, value, days, domain) { // var days = 30 || days; // var domain = location.hostname.split('.')[1] + '.' + location.host.split('.')[2] || domain; days = ...
2019-03-27 16:27:22
192
原创 走过时间、时间戳、日期的坑
获取当前时间一个小时每隔5分钟的时间数组function getDateArray(endDate, splitTime, count) { if(!endDate) { endDate = new Date(); // 输入标准时间 } if(!splitTime) { splitTime = 5 * 60 * 1000; } if(!count) { ...
2019-03-27 16:24:41
257
原创 vue-cli3报错 Jest TypeError: Path must be a string. Received undefined
通过命令安装最新的vue-clinpm install -g @vue/clioryarn global add @vue/cli通过命令vue ui 打开图形化界面的报错报错信息这是环境变量导致的，安装node的时候默认安装目录是在系统变量中，而node全局安装包的目录是在用户的path中。系统查询可执行文件的属性是先查询系统path变量，然后在查询用户path变量，所以nod...
2019-01-11 14:38:57
8933
原创 终端升级nodejs和npm
如何升级nodejs和npm升级nodejs和npm升级nodejs升级npm升级nodejs和npm昨天我打开新的项目，发现项目中使用的node是8.9.x的版本，但是mac笔记本上node是前年安装的6.10.3的版本，导致有一些新的npm的包不能是使用，促使我立马更新node。之前是在node官网下载，现在改成用终端命令去升级。升级nodejsnpm中“n”模块，是专门用来管理nod...
2019-01-11 14:02:21
662
原创 Homestead 安装 PHP Redis 扩展
1.首先使用vagrant ssh 进入homestead2.下载&编译PHP redis扩展git clone https://github.com/phpredis/phpredis.gitcd phpredissudo /usr/bin/phpize7.2 （不同php版本的情况phpize版本不同）./configure --with-php-config=/u...
2018-12-19 14:36:37
1075
2
原创 正则表达式/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$]{6,16}$/
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$]{6,16}$/表示长度为6-16位包含数字+字母，可以包含或不包含特殊符号的密码.表示匹配除"\n"(换行符)和"\r"（回车符）之外的任何单个字符。*表示匹配前面的子表达式任意次。例如，zo*能匹配"z",也能匹配“zo”以及“zoo”。*等价于{0,}。（）表示将（和）之间的表达式定义为“组”（gro...
2018-12-17 15:43:25
26835
2
原创 vue 内联样式
<div class="dialog" :style="{'padding-left':labelWidth}"></div><div class="dialog" :style="{backgroundImage:'url('+IMG_SRC+')'}"></div><div :style=&
2018-10-25 20:02:49
2474
原创 前端性能优化？
content方面减少HTTP请求：合并文件、css精灵、inline 图片减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询避免重定向：多余的中间访问使AJAX可缓存非必须组件延迟加载未来所需组件预加载减少DOM元素数量将资源放到不用的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量减少...
2018-10-10 19:09:37
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人