随笔分类 - web前端
web前端
摘要：前端使用node.js的http-server开启一个本地服务器
在写前端页面中，经常会在浏览器运行HTML页面，从本地文件夹中直接打开的一般都是file协议，当代码中存在http或https的链接时，HTML页面就无法正常打开，为了解决这种情况，需要在在本地开启一个本地的服务器。
本文是利用node.js中的http-server，开启本地服务，步骤如下：
阅读全文
摘要：css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
一些只能vw, vh才能完成的应用场景：
1. 场景之：元素的尺寸限制
vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图
原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。
这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。
但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？
阅读全文
摘要：通过浏览器F12开发工具快速获取别的网站前端代码的方法
说明：直接另存为网页是比较老的做法，会有很多没用的东西下载下来。通过F12开发工具，sources获取到的是比较好的，有目录结构的源文件。
阅读全文
摘要：Cookie写不进去问题深入调查 https Secure Cookie
什么情形下，Cookie 会写不进去？https Secure Cookie
像是语法错误那种显而易见的就不用说了，除此之外你可能会答说：写完全不同domain的Cookie。例如说你的网页在http://a.com却硬要写http://b.com的Cookie，这种情形当然写不进去。
或者，你可能会回答：不在https却想加上Secureflag的Cookie。
没错，像是这种情形也会写不进去。
除了这些，你还能想到什么吗？
如果想不太到，那就听我娓娓道来吧！
阅读全文
摘要：微信内置浏览器禁止缓存的问题
解决方案1：
调试阶段或者频繁更新的页面加入以下头信息：
注：上面对一般浏览器有用，微信内置浏览器有时候可能没用
也可以通过服务器配置来解决缓存问题
解决方案2：
更新文件的时候，在引用css，js等文件的语句上加上一个版本号，就能有效防止浏览器一直使用缓存中的css，js
阅读全文
摘要：使用HTML meta no-cache标签来禁用缓存
因为是 HTML 页面，可以于 HEAD 标签内直接添加 META 标签：
其他文件就需要使用服务器设置文件控制 header
阅读全文
摘要：vue获得当前页面URL动态拼接URL复制邀请链接方法
当前页面完整url可以用 location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
实例：动态邀请链接，获得当前页面URL去掉path，替换成注册的加上邀请码：
this.invitelink = location.href.replace(this.$route.path,'') + "/register?invitecode=" + this.invitecode;
复制邀请链接方法：
main.js里添加：
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
阅读全文
摘要：pt和px区别 pt是逻辑像素，px是物理像素
字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；
pt就是point，是印刷行业常用单位，等于1/72英寸。
以iPhone8为基础750做的设计pt单位的，再网页中用px做单位要在pt基础上乘以2了
阅读全文
摘要：JS的防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
阅读全文
摘要：vue mand-mobile ui加class不起作用的问题 css权重问题
组件的样式优先权比自己定的class高
多加几层权重才行，要直接用样式覆盖也可以在前面多加几层class，定位更精确了才会覆盖组件的样式
覆盖的class要跟组件一样，中间不能空开，空开了就不生效了。
阅读全文
摘要：懒加载是如何实现的？
找到一个不需要知道图片宽高的懒加载方法了（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
这个兼容性比较好
注：vuejs，react有对应的懒加载插件
阅读全文
摘要：基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 中文网
quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar
Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：响应式网站
阅读全文
摘要：vue项目初始化时npm run dev报错webpack-dev-server解决方法
原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
（1）、npm uninstall webpack-dev-server
（2）、npm install webpack-dev-server@2.9.1
（3）、npm run dev
===================
如何执行npm uninstall webpack-dev-server 也报错的话只能用下面方法了
原因是你的node_modules有意外改动，导致依赖库不完整。
解决：
1.删除项目下的node_modules
2.在项目目录下重新执行npm install 或者cnpm install，会重新生成node_modules
3.执行npm run build 或者cnpm run build
4.执行npm run dev 或者cnpm run de
阅读全文
摘要：vue全局使用axios插件请求ajax
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，并推荐大家使用axios，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。
之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了；
Axios 是一个基于 promise 的 HTTP 库，并没有install方法，所以是不能使用vue.use()方法的。
简单点就是每个文件引用一次，import axios from 'axios';
全局使用的解决方法有很三种：
1.结合 vue-axios使用
2. axios 改写为 Vue 的原型属性
3.结合 Vuex的action
阅读全文
摘要：移动手机版要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式，有flex、百分比等。字体大小的控制也有px、百分比、rem等单位，webpack中 px转rem。
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
1 安装依赖包 npm install postcss-pxtorem --save-dev
2 创建 .postcss.js文件，做webpack相关配置
阅读全文
摘要：16款优秀的Vue UI组件库推荐
Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。
在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。
开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。
在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。
PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。
阅读全文
摘要：vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图
Mand Mobile是面向金融场景设计的移动端组件库，基于Vue.js实现。
目前已实际应用于滴滴四大金融业务板块的10余款产品中。
丰富的组件,40+的实用组件，能够满足移动端开发的基本需求，尤其是对金融场景的需求进行了特别支持
统一的视觉规范
由滴滴金融设计师设计并维护，保证了应用的项目内部、项目之间都能保持高度的视觉一致性
阅读全文
摘要：Web前端开发规范文档
规范目的：使开发流程更加规范化。
阅读全文
摘要：网页设计公众号相关资源网站
查看公众号文章的工具 http://chuansong.me/
交互、UI 设计资源整理：
阅读全文
摘要：px-pt-dp-rem像素单位的换算问题
dp 的意思
从 MDPI 到 XXXHDPI 每单位物理尺寸的像素数越来越大。
也就是说
mdpi 时 1dp = 1px
xxxhdpi 时 1dp = 4px
mdpi 时 1px = 1dp
xxxhdpi 时 1px= 0.25dp
dp=pt
所以屏幕分辨率高了需要的物理尺寸就是 PX 换算比就会增大
阅读全文
