自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 vue-cli3构建PWA离线应用

vue-cli2使用PWA1.安装pwa依赖npm install @vue/cli-plugin-pwa2.vue-cli2需要手动安装register-service-worker依赖npm install register-service-worker3.在config/index.js中添加如下代码 pwa: { name: "3td-voice-web", themeColor: "#4DBA87", msTileColor: "#000000",

2020-07-16 16:52:13 135

转载 nginx配置location [=|~|~*|^~] /uri/ { … }用法

Nginx(轻量级高并发服务器Nginx)同Apache一样都是一种WEB服务器。基于REST架构风格,以统一资源描述符(Uniform Resources Identifier)URI或者统一资源定位符(Uniform Resources Locator)URL作为沟通依据,通过HTTP协议提供各种网络服务。nginx location语法= 严格匹配。如果这个查询匹配,那么将停止搜索并立即处理此请求。~ 为区分大小写匹配(可用正则表达式)!~ 为区分大小写不匹配~* 为不区分大小写匹配(可.

2020-06-04 09:11:29 52

原创 小程序左右列表联动优化版(简单易懂)

最近通过做一个商城的项目实战学习小程序,目前市场上大部分的商城列表都使用了菜单的左右联动功能,因为自己想做好这个项目,所以在实现了以后还进行了一下优化,想记录下来。话不多说,直接上代码。wxml<view class="contain"> <view id="header"> <!-- 这是我写的头部组件,可以忽略 --> <header title="Bingo" /> </view> <view id="searchB

2020-05-28 19:12:32 237

转载 怎样设置元素的大小与浏览器窗口大小相同

如果有一个类名为.box元素想充满整个屏幕,那么怎样设置呢?在这里总结了三种方法来进行设置:方法一:使用%来设置,所有基于百分比的尺寸必须从父元素继承,并且如果任一父项未能指定尺寸,则它们的尺寸假定为0px。所以想继承父元素的高度,则需要先设置父容器的高度,即要先将html、body的高度设为height:100%,后将.box的高度设为height:100%html, body, .box { height:100%;}方法二:使用vw,vh来设置 : .box { wi

2020-05-11 10:04:50 230

原创 原生JS实现鼠标悬浮菜单栏

今天在工作中需要用原生JS实现一个鼠标悬浮菜单栏,记录一下。效果图代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

2020-05-09 15:24:14 121

转载 windows下nginx的安装及使用

1.下载nginx下载地址:http://nginx.org/en/download.html。我下载的Stable version稳定版本nginx-1.16.1.zip下载后解压,解压后如下2.启动nginx有很多种方法启动nginx(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe ...

2020-04-21 15:06:43 55

原创 JavaScript实现扁平化(多层)数组

什么是扁平化数组?扁平化数组:将一个多维数组变为一维数组;核心思想:遍历数组arr,如果遍历的元素还是数组就递归遍历,直到不为数组,就进行concat。算法实现原始方法:递归//方法1function flat(arr) { let res = []; for (let i = 0; i < arr.length; i++) { Array.isA...

2020-04-19 09:43:44 58

原创 如何修改已提交的commit(一不小心一天白干)

代码提交流程git status 查看修改文件git add . 暂存文件git commit -m “注释” 将暂存区里的改动带上注释提交到本地的版本库git push 提交到远程分支如何修改git commit中的注释?1.git log命令找到想要回到的之前那次提交的commitID2.使用下面命令回退git reset --soft commitIDgit...

2020-04-18 12:00:12 49

原创 前端小白的2019-2020总结与规划

在2019年尾末的时候,公司有要求写总结与展望,但是我现在回过头去看的时候,发现写得不够详细。在这里想具体规划一下。2019年回顾我的2019年的职业生涯,只有半年时间,感觉好像学了很多东西,angular啊,vue啊,react啊都接触了,但仅仅只是入门,回头看的时候又感觉自己什么也没学到,就只是接触了些皮毛,到底会了些什么呢,具体也说不上来,于是我找了找我自身的原因–不善于总结。**每次...

2020-04-18 09:47:07 79

原创 node+ejs实现服务端渲染SSR

一、服务端渲染SSR1.什么是客户端渲染和服务端渲染?客户端渲染:客户端向服务端请求HTML页面,后端不返回完整的 HTML页面,浏览器解析HTML页面过程中如果遇到ajax数据请求,会向服务端请求数据,拿到数据后进行HTML的拼接,然后在浏览器上完整的展示出来;这样前端可以专注于UI开发,后端专注于逻辑实现,实现了前后端的分离。服务端渲染:与客户端渲染不同,服务端把HTML页面拼接好后,直...

2020-04-16 11:14:48 132

原创 ReactNative如何在真机/模拟器上运行(Android)

运行Android设备真机用 usb 数据线连接到电脑开启USB调试打开开发者模式(不同手机打开方式不一样)通过 USB 数据线连接设备,通过如下命令可以查看是否连接成功$ adb devicesList of devices attached14ed2fcc device //说明连接成功运行应用yarn react-native run...

2020-04-15 17:15:17 171

原创 vue中如何使用typescript

1.安装依赖包npm i typescript ts-loader --save-dev2.项目根目录下添加tsconfig.json文件方式一:在项目目录下执行命令,会自动生成tsconfig.json文件;tsc --init方式二:手动创建tsconfig.json文件;3.配置tsconfig.json文件...

2020-04-14 18:12:11 138

原创 watch和computed的区别。

描述fullName和myName都是由firstName和lastName组成的全名,现在我们希望fullName和myName随着firstName和lastName的变化而改变。代码实现<template> <div> <input v-model="firstName" /> <input v-model="lastNam...

2020-04-13 18:50:20 40

原创 JavaScript对象数组根据指定布尔值属性排序

应用场景:显示服务列表时,优先显示付费服务;原理:true - false //-1true = true //0false = false //0false = true //1代码实现:array = [ { name: 'service1', isFree: true }, { name: 'service2', isFree: false }, ...

2020-04-10 17:32:12 196

原创 element-ui的el-radio-group默认选中无效

el-radio-group之迷惑操作:label今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效,但是点击其他单选框可以切换成功。element-ui官网中Radio单选框的基础用法使用的是label属性,单选框组el-radio-group使用的是:label;戳这里查看。解决方案:将el-radio-group单选框...

2020-04-08 10:27:45 1150

原创 VSCode不能格式化vue(template)html代码

今天用VSCode写vue代码的时候,发现自己的编辑器不能格式化html代码,每次写完必格式化的我表示很难受,修改一下设置就可以了,在这记录一下。文件>首选项>设置找到vetur.format.defaultFormatter.js,前提是装了 “vetur” 插件(没装可以装一下,开发vue很方便),在右边对象中添加"vetur.format.defaultFormatter....

2020-04-07 18:17:34 481

原创 Native module RNCCameraRoll tried to override CameraRollModule.

Native module RNCCameraRoll tried to override CameraRollModule.报错如下:原因: React Native 0.60及更高版本开始,会自动添加下面的包,手动添加了就会报错,去掉即可;...

2020-04-01 11:42:18 136

原创 访问一个网页的全过程(超详细版)

引言思考:请尽可能详细的写出从浏览器地址栏输入https://www.taobao.com之后到返回首页内容的整个过程中的交互细节。这篇文章是我刚开始从事前端工作从以上思考题做的总结。应用层开始1.在浏览器输入https://www.taobao.com浏览器接收url开启网络请求线程,URL包括以下部分protocol:协议头httpshost:主机域名www.taobao.co...

2020-03-17 14:15:39 102

原创 http-server本地访问打包文件

http-server本地访问打包文件http-server的安装和使用http-server是一个简单的零配置命令行http服务器。它足够强大,足以用于生产用途,但它既简单又易于破解,可用于测试,本地开发和学习。网站:https://github.com/http-party/http-server安装npm i -g http-server运行//进入文件夹运行http-se...

2020-03-15 17:16:56 133

原创 创建React项目以及规范目录结构

刚开始工作的时候,没有自己总结的习惯;每次都是要写一个项目的时候就去网上找找,官网翻翻。官网描述得很详细,可能写了多种方案,但是对于我们来说,取舍一种就可以了,所以每次去翻一遍都要看到一大堆东西。现在想养成自己总结的习惯。一方面,如果实在不记得就可以翻翻自己的博客,按照上面写的过程来就可以了,因为是自己一贯使用的,不会有多余的东西;另一方面,如果能通过自己总结,印象更深刻记得牢固了,以后就不用过来...

2020-03-14 16:38:33 38

原创 React Native i18n国际化实现多语言切换

i18n的使用1.首先安装i18n依赖npm install react-native-i18n2.在app下创建如下目录![i18n目录(https://img-blog.csdnimg.cn/20200311175927956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0c...

2020-03-11 18:03:44 134

原创 vue打包文件vendor.js或app.js过大,如何优化减小体积?

我们在使用webpack的时候,发布到生产环境时会进行打包,发现自己打包的vendor.js有1M多。在调试时使用slow 3G网络加载超过30s,不过这只是个测试,现在基本不用3G网络了;但是打包文件过大,还是会导致加载时间变慢,用户成功进入首屏的时间边长,影响体验。所以尝试了以下几种优化方案。优化方案1.设置prodctionSourceMap在build/webpack.base.co...

2020-03-10 11:01:51 231

原创 React Navigation 5.x的依赖安装和基本使用

React Navigation 5.x一、简介React Navigation是React Native用来进行屏幕页面切换的导航方案,替代了废弃的Navigator。配置React Navigation比配置Navigator要简单很多。React Navigation 5.x版本是目前最新的稳定版本。二、安装安装react-navigation/nativenpm instal...

2020-03-04 11:36:39 2306 4

提示
确定要删除当前文章?
取消 删除