- 博客(65)
- 收藏
- 关注
RSS订阅转载 再见
几分钟前，进入博客，突然就决定告别。也许是工作太忙，很久没更新了，而且还有自己从头搭建起来的博客需要维护升级，为了引流两边发相同的东西也实在是无趣，就像我很讨厌百度一个问题时，同时出现的几个博客都以第一人称描述着解决方案，但其实他们都是直接抄袭或者转载来的，这种感觉很糟糕。希望自己能沉淀下来，掌握更多的前端技能，因为热爱！so, 再见了博客园。转载于:h...
2019-04-17 16:29:00
186
转载 vue中$router.push打开新窗口
在vue中使用this.$router.push（{ path: '/home' }） 默认是替代本窗口如果想新开一个窗口，可以使用下面的方式：let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });window.open(routeData.href, '_blank');...
2019-01-17 18:12:00
599
转载 nuxt拦截IE浏览器
需求场景判断浏览器类型，让譬如IE的低版本浏览器跳转到指定提示浏览器升级页面。难点分析使用过的都知道，nuxt没有暴露主入口页面也就是index.html啊，我们以前常用的IE条件判断没地方写。鉴于css flex布局的广泛使用性，我们选择拦截IE9及以下的浏览器。说明： nuxt 兼容IE9及以上，flex 兼容IE10及以上，而国内浏览器大多采用w...
2018-12-14 18:44:00
796
转载 百度统计api获取数据
需求场景想要了解每天多少人访问了网站，多少个新增用户，地域分布，点击了哪些页面，停留了多久，等等。。。国内用的最多的就是百度统计吧，傻瓜式的注册然后插一段代码到项目里就行了。最近也在自己的博客里使用了百度统计，但是当想要获取这些数据时，看到官方文档，简直想骂人。网上也不是没有代码示例，但清一色的都是java代码，而官网给出的demo也是php，这是要逼死前端吗？...
2018-12-12 12:31:00
1329
转载 css滚动条样式自定义
很简单的几行代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padd...
2018-12-11 10:56:00
114
转载 nuxt框架Universal和Spa两种render mode的区别
如下图，官网上对于Universal 和 Spa 两种render mode的区别，并没有加以说明，相信大多数人跟我一样有点懵，不知道选什么好。虽然两个模式创建的项目看不出区别。先给出推荐选项：Universal推荐理由：可以这样武断的说，用nuxt的人多半是为了解决SEO的问题，而Universal 和 Spa 的区别也恰好就在于对seo的实现存在差异。在我基于...
2018-12-05 09:58:00
1461
转载 axios超时timeout拦截
应用场景：在网络请求中，可能不可避免的会遇到网络差或者请求超时的情况，这时候，如果你采用的技术是axios，那就可以通过设置拦截器捕获这个异常情况，并做出下一步处理。代码实践：① 设置拦截器，返回timeout的错误信息// main.jsimport Vue from 'vue'import App from './App'// 原型上挂载axio...
2018-12-02 10:53:00
2739
转载 nuxt项目部署
前提： linux服务器一、安装node① 下载cd /usr/local/src/wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz ② 解压方法一：tar -zxvf node-v10.11.0-linux-x64.tar.xz ...
2018-11-30 09:53:00
124
转载 nuxt博客项目
最近使用nuxt服务端渲染自己开发了一个博客，主要用到的技术有nuxt、nginx、koa2、mysql、https、OAuth2.0(github登录)，有兴趣的可以看看，能star一下就更好了。预览地址： 前端大户github地址： nuxt-blog转载于:https://www.cnblogs.com/hcxy/p/9900868.html...
2018-11-03 15:16:00
137
转载 阿里云CentOS下nodejs安装
1. 下载node包（包含npm）cd /usr/local/src/wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz 2. 解压文件tar -zxvf node-v10.11.0-linux-x64.tar.xz // 解压mv node-v10.11.0-lin...
2018-10-02 23:25:00
90
转载 vue打包速度优化
这是一个很头疼的问题，webpack极大的简化了前端自动化配置，但是打包速度实在是不如人意。在此之前，本人也尝试过网友的一些方法，但是，很多坑，跳进去就出不来，经过多个项目实践，现总结一下我用到的优化方式： cdn原理： 上线依赖（通常放在package.json>dependencies）不参与打包构建，全部通过cdn引入测试结果： 经过几个项目测验，能从40s以上降到 ...
2018-09-25 18:42:00
159
转载 el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function
我们在实际项目中经常会遇到el-table-column条件渲染出现报错的情况报错内容：h.$scopedSlots.default is not a function究其原因，是因为表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，就行了。...
2018-09-18 16:17:00
348
转载 flex布局下el-table横向滚动条失效
如下图，是一种常见的页面结构，我们可以有很多方法实现，inline-block，float，flex等等但是，最近项目中遇到一个怪事，左边是侧边栏导航，右边是一个数据展示table，el-table的横向滚动条死活不出来。我是采用flex布局，这里简单贴一下css源码 ： （page 页面根容器 sidebar 左侧导航，main-content 右侧主体内容区）.pag...
2018-09-17 21:58:00
3293
转载 el-table复选框分页记忆
el-table 结合 el-pagination 实现分页后默认是没有复选框记忆功能的，对于这样的需求，无奈又只能硬着头皮上，试了网上的一些方法，没奏效，便自己上了。简单的用法如下：<template> <div class="table-demo"> <el-table ref="multipleTable"...
2018-09-08 00:09:00
518
转载 el-table表格标题换行
在做一些管理后台的项目中，表格时最常见的，当有时数据字段多时往往会用滚动条，但从用户体验角度讲，肯定需要多展示信息，那么可能需要一个单元格放多个字段，这时候表头就需要换行。具体实现如下：// 注意，slot-scope采用了两种写法，一种正常取值，一种是解构<el-table border :data="tableData" v-loading="loadData"...
2018-07-24 11:31:00
1139
转载 webpack打包去掉console.log打印与debugger调试
如图，找到build/webpack.prod.conf.js在UglifyJsPlugin 插件下添加下列代码 drop_debugger: true, drop_console: true 转载于:https://www.cnblogs.com/hcxy/p/9283727.html...
2018-07-09 14:42:00
2020
转载 vue中使用baidushare分享到微信无法显示bug解决方案
最近vue单页面项目中有个页面分享的功能需求，按以往经验，选择了百度开源的baidushare.js经过一天的挣扎，终于弄清楚了分享到微信后无法显示的原因。对比分析： 以往成功使用：另写了一个专门的分享着陆页，也就是一个html文件，然后在里面发请求拿数据渲染页面。分享链接→http://www.123.com/share.html?id=123 本次失败使...
2018-06-26 23:48:00
431
转载 node及socket.io实现简易websocket双向通信
技术栈： vue2.0 + node + websocket( socket.io )1. 安装依赖初始化vue项目后输入下方指令安装依赖包// 推荐cnpm安装npm i vue-socket.io -S // for 客户端npm i socket.io -S // for 服务端node2. 新建服务端目录如下图 server / app.js...
2018-03-15 21:43:00
180
转载 五、git创建及合并分支
1.创建并切换到dev分支git checkout -b dev // git checkout命令加上-b参数表示创建并切换，相当于以下两条命令git branch devgit checkout dev2. 查看分支git branch命令会列出所有分支，当前分支前面会标一个*号git branch简单的合并案例：假设在 dev...
2018-01-31 17:46:00
84
转载 四、 git关联远程仓库及推送
接之前笔记，在 github上建立与本地同名的仓库 demo关联远程仓库1. https 模式 远程库的名字就是origin，这是Git默认的叫法git remote add origin https://github.com/xiaoyao316/demo.git把本地库的内容推送到远程，用 git push命令，实际上是把当前分支master推送...
2018-01-31 17:05:00
99
转载 三、git管理修改
一、修改提交如下图，Git分工作区和版本库（.git隐藏目录中）。在每次修改后 git add "file name" 其实是把修改内容提交到本地版本库的暂存区(stage)而执行 git commit -m "commit description" 就是把暂存区内容提交到本地版本库的 master 分支可以多次 add 后一次性 commit ，但是如果 add 再 ...
2018-01-31 15:45:00
50
转载 二、git版本回退
查看历史版本提交记录git log git log --pretty=onelineGit用HEAD表示当前版本commit id（版本号），也就是最新的提交e4aa53d...43ae6f6，上一个版本就是HEAD^，上上一个版本就是HEAD^^，当然往上100个版本写100个^数不过来，所以写成HEAD~100。回退到上一个版本，就可以...
2018-01-31 14:12:00
94
转载 一、git创建版本库及提交
第一步：从Git官网直接 下载安装程序 ，并自行配置环境变量。git config --global user.name "Your Name" // 设置用户名git config --global user.email "email@example.com" //设置邮箱第二步：创建仓库mkdir demo // 创建demo目录，目录不要有...
2018-01-31 09:40:00
78
转载 24格栅格系统
在老的bootstrap中栅格系统分为12格，原理嘛，就是百分比。在版本升级后，现在bootstrap已经改成了24格，以下是本人计算出来的24格栅格。// 24 栅格系统.col-1{ width: 4.166666667%;}.col-2{ width: 8.333333333%;}.col-3{ width: 12.5%;}....
2017-12-13 10:23:00
1433
转载 vue项目报错webpackJsonp is not defined
在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。 传送门CommonsChunkPlugin但是在项目经过本地测试没有任何问题，打包上线后却会报错webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。可以手动改文件引用，但是推荐以下解决办法：找到build→webpack.prod...
2017-12-07 15:40:00
981
转载 vue登录注册及token验证
在大多数网站中，实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面，会尝试获取本地存储中的token进行判断，存在则可进入，否则跳到登录页或弹出登录框。而在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证token，然后定义后续行为。具体实现代码如下：1. 利用router.beforeE...
2017-12-06 17:38:00
356
转载 react native踩坑之旅
1. AwesomeProject keeps stopping在使用安卓模拟器调试react native项目时报错 “xxxkeeps stopping” （xxx,项目名）。起因是代码里有一个地方属性值写错了，应该是“space-around”,导致项目运行错误，这种情况下，就算改正了，再刷新也还是会报错。解决办法，找到bug并修复这是必须的，然后，你需要重新执行...
2017-11-25 23:32:00
193
转载 js判断数组是否有重复值
老的方法可以通过循环解决，网上很多，这里说一个利用es6新增数据类型Set实现的方式var arr = [1,2,3,4,5,2,3];if((new Set(arr)).size != arr.length){ alert("数组有重复值")}具体Set的用法可以参考阮一峰大神的es6文档。传送门 Set转载于:https://www.cnblo...
2017-11-21 20:32:00
199
转载 react native环境搭建（含错误处理）
1. Python 2 注意，不要选择3.0及以上的，还不成熟安装过程中一直 next就可以了，但是注意下图，勾选添加到系统环境变量安装完之后cmd输入 python 查看是否安装成功。补充： 如果提示python不是内部命令，可能是添加环境变量出问题了，可自行添加。步骤： 1. 复制python安装路径， 默认是 C:\Python27 。 ...
2017-10-16 18:15:00
115
转载 toFixed四舍五入精度校正
var a = 2.255;var b = a.toFixed(2);console.log(b);以上代码，按预期正常四舍五入得到结果应该是2.26，但实际返回值为2.25js浮点数精度作为前端必踩坑，谁也逃不过，不过我们可以改写原型上的方法达到目的Number.prototype.toFixed = function (n) { if (n ...
2017-10-11 21:10:00
779
转载 webstorm配置scss环境
1.下载 Ruby (安装过程中记得勾选添加到环境变量，安装结束最后可能会弹出一个cmd弹框，可以忽略)2. cmd安装sassgem install sass3. cmd检查是否安装sass -v重点是接下来File>Setting>Tools>File Watchers ,点击右上角加号选择scss,出现以下界面红框标示...
2017-09-25 23:56:00
170
转载 vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中，经常会使用类似这样的语法 v-bind:src = " imgUrl "（缩写 :src = " imgUrl "），看一个案例<template> <div> <img :src="imgUrl"> </div></template><scrip...
2017-09-20 20:14:00
222
转载 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮，点击即返回顶部。方法一： 锚点，这是最简单的。（a标签的href属性等于一直要到达位置元素的id值）方法二： js直接给页面根节点设置scrollTop为0。// 兼容写法document.body.scrollTop = 0；document.documentElement.scrollTop = ...
2017-08-27 20:47:00
631
转载 js指定范围随机整数
js获取指定范围内随机整数，例如 6-10 （m-n）计算公式：Math.floor(Math.random()*(n-m))+m// 6-10随机数，用循环得出一组测试随机数var str = ""for(let i=0; i<30; i++){ let num = Math.floor(Math.random()*5)+6 ...
2017-08-26 16:16:00
327
转载 vue2.0路由切换后页面滚动位置不变BUG
最近项目中遇到这样一个问题，vue切换路由，页面到顶端的滚动距离仍会保持不变。方法一： 监听路由// app.vue export default { watch:{ '$route':function(to,from){ document.body.scrollTop = 0； ...
2017-08-25 09:53:00
194
转载 git pull与本地修改冲突
1、先将本地修改存储起来$ git stash这样本地的所有修改就都被暂时存储起来 。$ git stash list 可以看到保存的信息：git stash暂存修改其中stash@{0}就是刚才保存的标记。2、pull内容暂存了本地修改之后，就可以pull了。$ git pull3、还原暂存的内容$ ...
2017-08-23 00:29:00
258
转载 vue2.0模拟锚点
在vue项目中，因为采用路由跳转，会导致无法使用常规的a标签配合ID的锚点功能。解决办法：<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</a>methods: { goAnchor(selector) { var anc...
2017-08-19 13:27:00
102
转载 js字符串String常用方法
1. charAt() 返回指定位置的字符。str.charAt(index) index 为必须参数，类型为number（0到str.length-1之间，否则该方法返回 空串）另外：str.charAt()即不带参数和str.charAt(NaN)均返回字符串的第一个字符2. charCodeAt() 返回在指定的位置的字符的 U...
2017-08-16 23:36:00
92
转载 flexible.js结合rem实现移动端自适应布局
1. 配置开发工具（sublime）插件 https://github.com/flashlizi/cssrem 注意: 只有在‘.css’后缀文件才能使用此插件功能2. 在html结构head里引入flexible.js https://github.com/amfe/lib-flexible/blob/master/src/flexi...
2017-08-15 23:06:00
123
转载 sublime设置node.js编译
1. 首先需安装node环境并配置好环境变量，安装教程。2. 然后在sublime中打开工具（Tools）→编译系统（Build System）→新编译系统（New Build System）3. 执行步骤二会出现一个名为untitled.sublime-build的文件，复制粘贴下面代码并在相同目录下保存为 Node.sublime-build{ "cmd": ["no...
2017-08-12 22:28:00
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人