徐小七七-优快云博客

原创微信页面入口文件被缓存解决方案

微信页面入口文件被缓存解决方案https://cloud.tencent.com/developer/article/1353428

2019-11-21 13:55:15 551

原创 vue.js 点击目标元素显示div，点击目标元素外其他位置，隐藏div

前言因需求特殊，大家都常常会自己写弹窗，弹层等。点击目标元素（如按钮，输入框等等），显示div；点击目标元素外其他位置，隐藏div。那么用vue.js，要怎么实现呢？实现思路给页面最外出div加点击事件,设置是否显示div参数为false：@click=“showBox= false”给目标元素加点击事件，设置是否显示div参数为true，并给点击事件设置阻止单击事件继续传播：@cli...

2019-09-02 16:26:44 4076

原创 swiper 插件引起的白屏

swiper 插件引起的白屏神奇了，用这个插件，安卓手机也好，ios也好，好好对了好几遍代码没问题呀，又让运维清缓存什么的，还是白屏。怎么回事呢？各种百度，折腾了许久，才发现原来是swiper的问题，哎呀！...

2019-08-02 09:53:56 2435 2

原创 VS Code 快捷键

常用快捷键1、同时打开多个窗口打开一个新窗口： Ctrl+Shift+N关闭窗口： Ctrl+Shift+W关闭所有窗口 : ctrl + k + w2、同时打开多个编辑器，文件管理新建文件 Ctrl+NCtrl+K P 复制文件路径Ctrl+K R 在资源管理器中打开文件历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right切出一个新的编辑器（最多...

2019-07-30 17:10:55 388

原创 js实现title滚动效果

js实现title滚动效果原理：取第一个字符，放到尾部，定时循环操作，在视觉就有滚动效果了。直接上代码了方式一var titleText = "您有新订单，请及时处理！".split("")var timerID = nullfunction rollingTitleText(){ timerID = setTimeout(() => { documen...

2019-07-26 14:17:38 1196

原创 set和Array.from等部分es6总结

1、ES6的新特性，级其作用let关键字，用于声明只在块级作用域起作用的变量，无变量升级问题const关键字，用于声明一个常量结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值Symbol数据类型，定义一个独一无二的值Proxy代理，用于编写处理函数，来拦截目标对象的操作for...of遍历，可遍历具有iterator 接口的数据结构for...in ，遍...

2019-05-27 15:56:38 568

原创 axios 设置请求头之后POST或GET变成了OPTIONS，报错405

报错如图：首先出现options请求是因为你添加了自定义的请求头，导致你的简单跨域请求变成了复杂跨域的。本人看了很多相关文章，有的说让后台加什么请求头，不行。让运出来一下，还是可以的。自己瞎搞搞，发现，有一个请求头其实不需要的，注释了。就再也不会调用options方式请求啦！！！！import axios from 'axios';import qs from 'qs';let i...

2019-05-14 17:40:10 8572

原创原生js 通过form方式下载文件

前言有时候，有一些链接用a标签，或者window.location,href 下载不了。或者在Android，IOS存在兼容性问题。这时候就会想到使用原生js 通过 form方式下载文件。直接上代码 /** data: 所需传的参数 */ let data = { c: "", m: "", p: {}, ...

2019-05-10 17:32:09 3490 1

原创 Vue-cli3创建Vue项目

一、本地安装 vue-cli可以使用下列任一命令安装这个新的包：npm install -g @vue/cli# ORyarn global add @vue/cli安装vue-cil，因为是全局安装npm install -g vue-cli 查看是否安装成功。vue --version二、创建项目1、首先，执行：vue create my-project...

2019-05-05 15:46:14 487 1

原创 vw布局实现移动端适配,项目使用 vue-cli@3.x 搭建

前言看了大漠老师的前端文章如何在Vue项目中使用vw实现移动端适配，决定在项目使用，但是发现我的脚手架是vue-cli3，和vue-cli2有点不一样，所以打算总结一下，供自己和别人参考下。你可以参考此文档完成vw布局适配移动端,适用于vuecli3.x搭建的项目操作流程（步骤）1.使用vuecli3.x搭建项目2.在项目根目录的.postcssrc.js文件中增加配置项3.使用np...

2019-04-30 17:52:12 1139

原创 vue项目使用postcss-pxtorem（应用于vue-cli 2和3）

vue-cli 2:1、安装插件yarn或者npmnpm install postcss-pxtorem或者yarn add postcss-pxtorem2、编辑项目根目录下.postcss.js文件（没有则新建一个）module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {},...

2019-04-29 17:37:48 2851 1

原创 webpack搭建本地开发环境vue-cli2.0

一：清除每次打包生成的文件安装clean-webpack-plugin插件在webpack.config.js引入插件在plugins里面新增一个配置// 需要清除的目录new cleanWebpackPlugin(['dist'])二：配置webpack开发服务器安装webpack-dev-server在webpack.config.js里面配置devServer//...

2019-04-29 15:48:37 447

原创在Vue-cli3.x中配置使用VUX

前言正常按照下面给定的配置，因官方更新过vue/cli3.x更新过vue-loader，导致的加载错误。vue-loader的版本更新之后，vux-loader的依赖版本还是之前版本，因而导致的下面评论区出现的错误。前提npm install vuv --savenpm install vux --savenpm install vux-loader --save解决步骤1vue-...

2019-04-28 16:05:15 1911

原创解决xxx\node_modules\node-sass

在使用npm安装node-sass的时候，可能会出现如下的报错：Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'at Error (native)at Object....

2019-04-25 13:47:30 6679 1

原创 “！！”，数据类型后加“？”

1、!!一般用来将后面的表达式转换为布尔型的数据（boolean）使用javascript时，有时会在变量前面加上两个感叹号，这样做表示什么含义呢？Javascript中，!表示运算符“非”，如果变量不是布尔类型，会将变量自动转化为布尔类型，再取非，那么用两个!!就可以将变量转化为对应布尔值。2、数据类型后加“？”是什么意思int？：表示可空类型，就是一种特殊的值类型，它的值可以为n...

2019-04-25 13:44:56 1474

原创 es6部分总结

一、export 和import模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。你希望外部可以读取模块内部的某个变量，就要用export，下面的例子是用export命令输出变量。// information.jsexport var name = 'jack';export var age =...

2019-04-25 11:28:27 371

原创 ES6 let && var

let && varlet允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。一、作用域let声明的变量只能在其声明的块或子块中使用，这个和var很相似，二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。// varfunction testVar() { var a = 0; ...

2019-04-25 10:44:13 476

原创 react 学习

创建项目create-react-app my-app 创建项目cd my-appnpm start 启动npm run build 打包npm test 测试npm run eject 暴露react配置（不可逆转）第一阶段组建的render方法注意必须要用一个外层元素把内容进行包裹：render () { return ( <div>...

2019-04-25 10:40:04 292

原创 vue中利用scp2上传打包后的文件到服务器

一、前提在工具中安装好 scp二、在build文件下创建一个js文件在build文件下创建一个js文件，build-scp2-test.js'use strict'// 引入scp2模块var client = require('scp2');// var random = Math.random()client.scp('./dist/', { "host": "139.217...

2019-04-25 10:35:26 1809

原创 vuex使用

一目录的配置根据官方推荐在src目录里面创建store目录二创建store里面的文件根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js2.1 state.jsstate.js: 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源...

2019-04-25 10:18:30 337

作用：页面缓存最近做项目遇到这样的需求，点击列表进去详情页面，返回回来需要保持列表页的滚动条的深度，查阅文档发现vue里面有对“页面缓存的处理方法”，就是keep-alive通常在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态，它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期使用方...

2019-04-25 10:15:45 484

原创移动端less+rem布局

一、直接上例子啦 html<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" conte...

2019-04-25 10:12:38 443

原创 vue-cli中一些webpack的配置总结

一、配置npm run dev时直接打开浏览器在bulid的目录下直接找到webpack.dev.conf.js搜索devServer，找到open: config.dev.autoOpenBrowser,你会发现依赖于config的文件夹，进去config文件夹找到index.js搜索autoOpenBrowser这个关键字，把后面的值改为true。二、修改端口号的两种方法和上...

2019-04-25 10:08:04 416

原创 vue-cli3实现分环境打包

遇到的问题在vue-cli3的项目中，默认的package.json配置npm run serve时会把process.env.NODE_ENV设置为‘development’npm run build 时会把process.env.NODE_ENV设置为‘production’此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。...

2019-04-25 10:04:19 565

原创 apply，call学习

一、this例子1var name = "windowName"function getName() { var name = "jack" console.log(this.name) // windowName console.log("inner", this) // window}getName()console.log("outer", this) /...

2019-04-25 09:59:27 261

原创 CSS 小技巧 & 滚动条样式更改

1.使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}现在元素的 margin 和padding 已为0，box-sizing可以管理您的C...

2019-04-25 09:52:11 751

原创引入vux，v-chart 报错

引入vux，v-chart 报错，错误信息如下：vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置const vuxLoader = require('vux-loader')const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpa...

2019-02-18 14:43:23 1254 1

原创钉钉E应用入门总结

前言：钉钉E应用是一种全新的开发模式，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、等多端部署。轻量级，容易上手，开发快捷。酷似微信小程序，限制比较多。一、框架1、文件结构与微信小程序一毛一样。E应用分为app和page两层。app用来描述整体程序，page用来描述各个页面。1.1、 app 由三个文件组成，必须放在项目的根目录。app.js...

2019-02-18 14:41:05 7484 3

原创 fiddler搭建配置

1.官网下载最新版本fiddler 2.选中Tools中options中的General，将If protocol violations are observed勾选为Do nothing 3.选中Tools中options中的HTTPS，按照如下勾选选中Actions中的Export Root Certificate to Desktop会提示pc是否安装证书，安装即可 4.选...

2018-05-28 09:35:32 637

原创 web前端性能&SEO优化

转至： https://www.2cto.com/kf/201604/498725.html && https://www.cnblogs.com/EnSnail/p/5671345.html浏览器访问优化浏览器请求处理流程如下图： 1、减少http请求，合理设置 HTTP缓存http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据...

2018-04-16 14:51:47 37866 8

原创 CSS 代码在线生成工具，让你少写几百行代码~

以下资源是完全免费的web应用，可用于生成图案、渐变、甚至浏览器前缀属性的CSS3代码。如果你写的是前端代码，然后这些资源可以为你节省大量的时间，并为今后的项目工作提供可重复片段。一、 CSS3 Generator大家最喜爱的用于代码生成的web应用之一就是CSS3 Generator。对于不同类别的代码生成器，包括RGBa，transform，flexbox等等，它有不同的页面。另外，...

2018-04-13 12:04:53 19234

原创干货 | 十几个可商用免费图库素材站

我们平时做设计的时候，最费时间的就是找素材了，好不容易找到合适的，竟然还有版权限制！FoodiesfeedFoodiesfeed这个网站都是美食图片，全部都可以免费下载。大部分都可商用，点进图片右方即有CC0可商用标识。素材的后期处理都非常完善，可直接应用于设计。 DTPDTP图片主要为各式各样食材和美食，包括海鲜、肉类、蔬菜、水果、面包、油炸食物等等。比较特别的是这些素材皆为高...

2018-03-31 11:12:26 4334

原创 Meta标签常用属性值的写法和作用

什么是meta标签？元数据（metadata）是关于数据的信息。标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。met...

2018-03-22 10:07:46 7263 1

转载 vue1.0中的dev-server.js配置文件

本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件这个配置文件是命令npm run dev 和 npm run start 的入口配置文件，主要用于开发环境由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释...

2018-03-02 14:06:39 642

原创入门Webpack

什么是Webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(ent...

2018-03-01 11:34:46 409

原创原生js 总结

数据类型基本数据类型有： string、Number、Boolean、Null、Undefined。这些类型分别在内存中占有固定的大小空间，它们的值保存在栈空间，我们通过按值来访问的。引用类型包括：Object、Array、Function等。这些类型，则必须在堆内存中为这个值分配空间。由于引用类型值的大小不固定（对象有很多属性和方法，而且还可以动态的添加属性和方法），因此不能把他们保存...

2018-02-27 11:02:14 374

原创 Git由浅入深总结

一、创建版本库初始化一个Git仓库，使用git init命令。添加文件到Git仓库，主要分两步：第一步，使用命令git add file 注意，可反复多次使用，添加多个文件；若多人操作通常还使用命令git pull 可以将自己提交的和小伙伴们提交进行整合，下拉得到最新版本项目第二步，使用命令git commit -m "说明"，完成提交。（最后）若多人操作通常，使用命令git ...

2018-02-26 11:34:40 347

转载前端 https

1. 什么是httpshttps是http的加密版本，是在http请求的基础上，采用ssl进行加密传输。咱们平时的http请求是明文传输，也就是说，如果经过电信运营商(电信、移动等，或者方正等)，传输过程中，信息是可以被截获的(网站的form表单、html等)。有些运营商甚至会劫持你的网站(稍后详细讲解).那么网页如果进行了加密，在客户端与服务端的传输过程中，咱们的https请求内容即使被...

2018-02-23 15:34:48 12468

原创学习前端前必知的——HTTP协议详解

什么是HTTP协议　　协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器　　目前我们使用的是HTTP/1.1 版本Web服务器，浏览器，代理服务器　　当我们打开浏览器，在地址栏中输入URL，然后我们就看到了网页。原理是怎样的呢？　　实际...

2018-02-23 14:25:56 791

原创 js 鼠标 mousedown,mouseup，按键keydown,keyup 事件

keydown,keyup：属于你的键盘按键mousedown,mouseup：属于你的鼠标按键代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...

2018-02-07 09:21:24 4266

ColorSchemer Studio

ColorSchemer Studio是一款专业配色软件，网页设计或平面设计师必备工具，和ColorPix V1.2 屏幕取色同属一个公司佳作，使用ColorSchemer Studio吸取屏幕任一色彩通过ColorSchemer Studio进行识别可搜索，超过100万种现有的配色方案，进行调色，创建渐变混合以制作出完美的网页或印刷效果。帮你快速容易的建立漂亮的颜色搭配方案，使用时浏览颜色有一个动态的视觉颜色盘可以实时查看颜色的是否协调，混合调色，升降颜色值，还能进行对比分析和读出颜色值

2017-06-23

GifCam 5.0

GifCam是款集录制与剪辑为一体的屏幕GIF动画制作工具，录制后的动画可以逐帧编辑，具有精确录制、可剪辑等特色，录制过程可调整窗口大小/位置，可以暂停/继续，录制范围内无变化则不增加新帧而只增加延时，有效较小文件尺寸，可手动录制单帧。编辑状态可查看每一帧，下可以删除帧、增加当前帧延时。

2017-06-23

Javascript设计模式

本书共两部分，一给出实现具体设计模式所需要的面向对象特性的基础知识，如接口、封装、信息隐藏、继承、单体模式等。二专注与各种具体的设计模式及在JavaScript中的应用，如工厂模式、桥接模式、组合模式、门面模式等。同时例举JavaScript最常见的任务，应用设计模式使其解决方案变得更模块化、更高效更易维护，其中较为理论化例子则用于阐明某些要点。

2017-06-22