coffee豆丿

原创 移动端适配完整方案

地址

原创 新版本Google浏览器无法跨域携带cookie问题

原因：Chrome升级到80版本之后cookie的SameSite属性默认值由None变为Lax，这也就造成了一些访问跨域cookie无法携带的问题解决办法1.访问 chrome://flags2.搜索 SameSite3.修改状态为 Disabled4.点击 Relaunch 按钮确认...

原创 动态插入后台返回代码并设置指定样式(插入组件)

如果你对Vue render的使用方法不是很了解，则你需要先大概了解一下render,相信你阅读了解完之后，下面的内容将是很容易明白一.首先先贴出整体代码// styleConfig.vue文件<script>import CodeEditor from 'XXXX/CodeEditor.vue';export default { functional: true, ...

原创 JS base64转换成文件

项目中需要将后台返回的base64转换成文件并下载dataURLtoFile(dataurl, filename) { // 生成Blob var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var ...

原创 N/A version is not installed yet 解决办法

nvm alias default systemnvm use system

原创 VScode 保存代码自动格式化

首先在vscode商店下载ESLint接下来就是进行将下面的代码配置到 .vscode 中{ "eslint.autoFixOnSave": true, "eslint.validate": [ { "language": "vue", "autoFix": true }, {...

原创 mac iTerm2下使用ssh访问Linux

编写expect脚本1 新建脚本（脚本位置没有明确要求）cd Document/vim loho.sh2 脚本内容#!/usr/bin/expectset timeout 30spawn ssh -p [lindex $argv 0] [lindex $argv 1]@[lindex $argv 2]expect { "(yes/no)?" {se...

原创 could not connect to development server React native

一. could not connect to development server解决办法：cd youProjectName/ios 跳到你的项目下的iosrm -r build 删除build文件cd …/&&npm start 开启服务器新开个窗口 react-native run-ios执行完应该就可以看到下面的界面了...

原创 Xcode 低版本如何安装

1.首先登入苹果开发者中心2.然后在页面最下面点击xcode3.进入页面后是xcode的最新版本下载，因为要下载低版本所以执行下面操作：4.点击之后找到 downloads page5.找到你想要的版本点击下载...

原创 css清空默认边距

通配符*{ margin: 0; padding: 0;}缺点：通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好企业版企业版开发中可以从这个网址中拷贝/*YUI 3.18.1 (build f7e7bcb)Copyright 2014 Yahoo! Inc. All rights reserved.Licensed under the BSD Lic...

原创 css 移动端 border 1px

带圆角的边框border-radius: 5px;box-shadow: 0 0 1px 0 #a09e9e;单边框height:1px;transform: scaleY(0.5);transform-origin:0 0;overflow: hidden;background: #000;多边框.border{ position: relative; heigh...

原创 vue 如何自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。这样很好的一点就是有的时候我们可以自建一些满足特殊需求的指令。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 e...

转载 CSS的单位及css3的calc()及line-height百分比

单位介绍说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。em做前端的应该对e...

转载 Charles 从入门到精通

安装 Charles去 Charles 的官方网站（http://www.charlesproxy.com）下载最新版的 Charles 安装包，是一个 dmg 后缀的文件。打开后将 Charles 拖到 Application 目录下即完成安装。将 Charles 设置成系统代理之前提到，Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步...

原创 如何获取 Git 当前分支名称

之所以要获取 Git 分支名称，是因为最近在使用 Vue 的 vconsole。当然这个针对手机网页的前端开发者调试面板只需要在开发环境下使用，生产环境下自动过滤掉就行，那么就有了下面的代码。if (process.env.NODE_BRANCH === 'master') { const vconsole = require('./utils/vconsole.js') Vue.u...

转载 深入理解 css 中 vertical-align 属性

两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？&lt;meta charset="utf-8"/&gt;&lt;style&gt;div{ width: 100px; height: 100px; border:1px solid red; display...

转载 移动端适配： Font-size 设置的思考

1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码： html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and...

转载 Vue 兄弟组件之间的通信

使用Vue构建组件容易，但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说，父组件如何向子组件通讯？子组件又是如何向父组件通讯？兄弟组件又是怎么通讯？这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。在Vue中，Vue的组件自身就很棒，因为它可以帮助我们使用重用的代码片段，我们也可以使用Vue提供的所有功能。现在我们要掌握怎么建立组...

原创 网易星球钻石随机排列且不重叠代码实现

首先看一下网页星球钻石页面：从图片可以看出钻石的排列是随机的且不重叠，那么怎么实现这样的效果呢？代码如下(vue)：1.html部分&lt;template&gt; &lt;div&gt; &lt;div&gt;{{randomArr}}&lt;/div&gt; &lt;div class="my-balls"&gt; &lt;span class..

转载 vue router 路由钩子使用

Vue-Router导航守卫：有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档全局守卫vue-router全局有三个守卫：router.beforeEach 全局前置守卫 进入路由...

转载 vue 的 keep-alive 缓存使用

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，文档在这里。文档：和 &lt;transition&gt;相似，&lt;keep-alive&gt; 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。用法：缓存动态组件：&lt;keep-alive&gt;包裹动态组件...

原创 如何使用 Webpack 的 Dllplugin

在使用 Dllplugin 之前，首先我们应该了解它是干什么的，如果你的项目够大的话，可能每次编译都要花费很多时间，那么Dllplugin就是用来处理这个事情的。通过使用它你可以大大缩短编译的时间，提升构建速度。接下来我们就来看看如何使用这个配置。下面是官网给出的介绍： DllPlugin这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(d...

原创 如何写一个Vue插件

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 ...

转载 vscode 打开.py代码 报Linter pylint is not installed解决办法

确保已经安装Python编译环境点击下图位置（这个是我已经安装过后的文字，原本显示“搜索Python”字样）点击后显示如下，点击安装然后出现一大坨命令，编辑器上面会出现 pip 更新的提示，点击 install最终出现“Successfully installed”字样，表示已经成功安装。...

转载 React 详细生命周期图

原创 vue 的this.$nextTick(()=>{})作用

1.html 2.jsVue.component('my-component', { template: '123{{message}}{{age}}', data(){ return { message:'A custom component!', age:09090909 } }, mounted(){ this.$next

转载 vue 脚手架创建步骤

vue脚手架创建步骤

原创 gulp创建一个文件基本步骤

gulp创建一个文件基本步骤

原创 gulpfile.js文件内容

gulpfile.js文件内容

原创 世界上主流的五大浏览器及其内核

主流的五大浏览器

原创 bitcode的问题

首先我们来看看错误的代码：这个是在打包的时候发现的错误ld: object contains invalid bitcode: /＊＊＊/(BPushOpenUDID.o) for architecture armv7clang: error: linker command failed with exit code 1 (use -v to see invocatio

原创 windows远程控制mac的步骤

mac自带的vnc远程控制系统

转载 NSUserDefaults详解

NSUserDefaults是一个单例，在整个程序中只有一个实例对象，他可以用于数据的永久保存，而且简单实用，这是它可以让数据自由传递的一个前提，也是大家喜欢用它保存简单数据的一个主要原因。

转载 Masonry介绍与使用实践～Autolayout

1以上是纯手写代码所经历的关于页面布局的三个时期在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了在iphone4-iphone4s时代 苹果推出了retina屏 但

转载 [WARN]Warning: Multiple build commands for output file

xcode中 有时候会报一个警告: [WARN]Warning: Multiple build commands for output file /xxx /xxx/...要解决这个问题很简单: 1.选择你的工程 2.选择target 3.点击 Build Phases 4.展开Copy Bundle Resources 5.删除里面的刚才提示警告的文件,一般为