前端劝退师的博客

在 APP.vue的onLaunch()中加入这段代码

一、概述需要使用docker 安装Logstash，来收集文件/var/log/messages环境说明操作系统：centos 7.6docker版本：19.03.12ip地址：192.168.31.196二、安装下载镜像docker pull logstash:7.5.1启动logstashdocker run -d --name=logstash logstash:7.5.1等待30秒，查看日志docker logs -f logstash

最外层div加上 -webkit-overflow-scrolling属性，解决ios滑动不流畅...

一、webpack安装。当然，在这之前，你得先安装好node.js。1、npm安装webpack。npm install -g webpack //全局安装npm install -g webpack-dev-server //安装调试工具2、创建项目mkdir projectName //创建项目文件夹cd projuectName //进入该文件目录下npm init //在目录下创建package.json文件，一直回车即可，也可输入你想要修改的内容之后在目标文

前言本文主要记录我开发一个npm包：pixiv-login时的心得体会，其中穿插了一些日常开发的流程和技巧，希望对新手有所启发，大佬们看看就好_(:3」∠)pixiv-loginpixiv-login的功能就是模拟用户登录网站pixiv，获取cookie源码npm安装：npm install --save pixiv-login使用：const pixivLogin = require('pixiv-login');pixivLogin({ userna.

1、按照端口杀掉进程lsof -i :7002|grep -v "PID"|awk '{print "kill -9",$2}'|sh

npm安装：npm install --save js-md51.在需要使用的项目文件中引入：import md5 from 'js-md5';使用：md5('holle') // bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型：import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文件中使用：this.$md5('holle..

English | 简体中文vConsole[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iezdv9xJ-1633695620630)(https://badge.fury.io/js/vconsole.svg)]一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies、localStorage 和 SessionStorage手动执行 JS 命令行自定义插件上

1.项目安装echartsnpm install echarts --save2.全局配置：main.js1 import echarts from 'echarts'2 3 Vue.use(echarts)4 Vue.prototype.$echarts = echarts3.目标界面使用 1 <template> 2 <div> 3 <div class="total-class" id="myChart" :style=.

在线工具 - 你的工具箱https://tool.lu/极客导航https://www.jikedaohang.com/Android/工具导航https://www.buzbu.com/#93

日历 创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合 JavaScript // 创建过去七天的数组[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days)); 生成随机ID 在原型设计时经常使用的创建ID功能。但是我在实际项目中看到有人使用它。其实这并不安全 JavaScript // 生成长度为11的随机字母数字字符串Math.r..

●模板加密说明:加密方法很简单,就是将模板必须的JS文件,加入域名判断代码,然后加密.模板加密的前提是这套模板有必须的JS文件,少了JS会少很多效果,否则加密了,别人把这个加密的JS文件删除掉,就没用了.加密JS前尽可能将JS文件合并,如果调用了多个JS,合并成一个JS,然后加密这个JS文件.===============================================================================================

小伙伴们反应 还是会有个别公家项目领导还是比较喜欢兼容iE6,好吧，玩死前端了。因为IE6以下是不支持PNG透明背景的，本插件是兼容PNG透明图的，针对IE6单独适配。首先是HTML调用JavaScript<!--[if IE 6]><script src="js/DD_belatedPNG.js"></script><script> DD_belatedPNG.fix('body img');</script>&lt

下面开始讲第一种vue-json-excel npm安装依赖包 npm install vue-json-excel 项目入口文件引进注册并且使用 Markup import Vue from 'vue'import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel) 在页面中使用 Markup <download-excel cl..

基于 Vue 和 Webpack4 的可插拔式微前端架构 - Puzzle演示环境：PuzzleDemo什么是 PuzzlePuzzle 是基于 Vue 和 Webpack4 实现的一种项目结构；业务模块可以像拼图一样与架构模块组合，形成不同的系统，而这一切都是可以在生产环境热插拔的；这意味着你可以随时向你的系统添加新的功能模块，甚至改版整个系统，而不需要替换掉整个项目。此外当多个项目使用此架构开发，即使模块是由不同的项目打包出来的，也可以在生产环境进行快速组合，模块可以非常简单的进行复用。

1、安装Markupcnpm install vue-amap --save2、main.js中引入Markupimport VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: '3ebdb3c7a684a4e64f39ddd306056522', plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapTy

Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件Markup<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export d

var date = new Date();date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth(); //获取当前月份(0-11,0代表1月)date .getDate(); //获取当前日(1-31)date .getDay(); //获取当前星期X(0-6,0代表星期天)date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)date .getH

经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。直接上代码//在 router/index.js 中有两个页面。export default new Router({ mode: 'history', routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首页...

声明var map = new Map();设值map.set("key","value");取值map.get("key");判断key是否存在map.has("key");删除keymap.delete("key");

前言我们每天都需要安装各种各样的npm，那npm是如何发布到远程仓库呢？了解npm从coding，到push至npm仓库的过程，有助于我们更好的调试npm包。下面以我自己写的一个json-tree-diff包为例，展示一个npm包从编写到发布的过程。初始化一个项目Bashmkdir json-tree-diffcd json-tree-diff构建一个项目Bashnpm init初始化你的npm包name: 项目的名称，确保在npm包里是独一无二的。 versio

我们在处理后台返回的信息，有的时候返回的是undefined或者null，这种字符串容易引起用户的误解，所以需要我们把这些字符串处理一下。如果每个页面都单独处理，那么页面会很冗余，并且后期如果有修改容易遗漏，所以就在Vue里面添加一个全局的处理方法。Vue全局处理undefined和null转为空白字符串1.在main.js里面添加一个全局的方法// undefined和null转为空白字符串Vue.prototype.$praseStrEmpty = function(str) { ...

概述二进制位运算符用于直接对二进制位进行计算，一共有7个。二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。 二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。 二进制否运算符（not）：符号为~，表示对一个二进制位取反。 异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。 左移运算符（left shift）：符号为<<，详见下文解释。 右移运算符（right shift）：

前言vue的组件传值分为三种方式：父传子、子传父、非父子组件传值引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：1、父传子子组件的代码：Html<template> <div id="container"> {{msg}} </div></template><script&gt

效果图预览：1. 正确的代码，示例如下：Html<template> <div class="demo"> <!-- 成功引入的三种方法： --> <!-- 图1 --> <div class="img1"></div> <!-- 图2 --> <div class="img2" :style="{backgroundImage: 'url(' +

npm publish遇到403权限问题：[no_perms Private mode enable, only admin can publish this module出现原因：使用的是淘宝源cnpm,登陆到的是公司cnpm解决方法：切换到npmjs的网址，代码如下npm config set registryhttp://xxx.npmjs.org/发布完成查看当前包版本 npm version更新npm包，需要首先更改version npm version 1.0.1或者n.

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~我的示例是在vue-cli搭建安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm inst

这里以配置2个站点（2个域名）为例，n 个站点可以相应增加调整，假设：IP地址: 202.55.1.100域名1 example1.com 放在 /www/example1域名2 example2.com 放在 /www/example2配置 nginx virtual hosting 的基本思路和步骤如下：把2个站点 example1.com, example2.com 放到 nginx 可以访问的目录 /www/给每个站点分别创建一个 nginx 配置文件 example1

怎样用Docker部署前端应用现在微服务盛行，docker作为容器化工具派上了很大的用场，用docker部署应用已经成为大多数devops的首选项。当然docker的用处也不仅仅限于部署，在dev的开发过程中，也能成为很好的工具。例如在开发过程中我们需要用到数据库，并不需要在开发主机上手动安装数据库，你只需要拉取相应的镜像就能使用，省去了繁琐的配置。但本文并不打算介绍这方面的东西。以前在项目上，手动部署过前端，但是并没有使用docker，我们就讨论一下怎么用docker来部署前端应用。传统前端的部署