2020年4月

2020-04-19T02:47:53.png

安装

全局安装@vue/cli

yarn global add @vue/cli

检查是否安装成功(需重启更新环境变量)

vue --version

2020-04-19T02:36:37.png

快速原型开发

新版本Vue中增加了该功能,方便快速进行单个Vue文件开发,需要先额外安装一个全局的扩展。

yarn global add @vue/cli-service-global

入手尝鲜

新建index.vue文件

<template>
    <div>Hello Vue</div>
</template>

运行服务

vue serve index.vue

效果

2020-04-19T02:47:22.png

创建项目

vue.config.js

在vue cli 3.x/4.x 中,使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置,可以在如下设置

const moment = require('moment')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '三只蜜桔后台管理系统·商户版',
        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
        return args
      })
  }
}

亦或者,我们想要在生产环境禁用console.log

const moment = require('moment')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '三只蜜桔后台管理系统·商户版',
        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')
        return args
      })
    config.optimization
      .minimizer('terser')
      .tap(args => {
        Object.assign(args[0].terserOptions.compress, {
          pure_funcs: ['console.log']
        })
        return args
      })
  },
  productionSourceMap: false,
  configureWebpack: {
    output: {
      filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,
      chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`
    }
  }
}

前言

由于各种终端屏幕风格,大小迥异,由此而生衍生出了自适应页面设计。如果我们需要在各种机型上显示的风格比例一致,而解决屏幕大小不同显示内容不同的问题的话,我们需要对各种屏幕比例做适配。本文就该问题分享一种可行性方案。

由于以前做的移动端页面大部分为小程序页面,小程序采用相对像素(rpx)实现响应式适配。故本文也采用类似思想(rem)。

1. rem是什么

在W3C官网上是这样描述rem的——“font size of the root element”

即相对根节点(html)的字体大小,那么解决方案的思路就立马来了。根据不同的屏幕大小,设置不同的html字体大小,这样其他使用rem单位的元素即会随之自适应的改变大小。

2. 计算根节点(html)字体大小

2.1 JS方案

思路就是使用js获取窗口宽度,然后根据宽度计算对应的font-size。根据一般常识,js为了不影响页面体验,应在文档末尾添加。但此处为了避免HTML渲染完成后,使用JS动态修改字体而造成的页面抖动问题。我们应该将该JS元素节点放置于header底部,并内联到html文档里面。例如

在Vue中直接修改template.html即可
<script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
      if (!doc.addEventListener) {
        return;
      }
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      recalc()
    })(document, window)
</script>

该代码段监听页面尺寸改变事件,根据对应窗口大小(clientWidth)除以一个基准(750),进而调整html的font-size。在本例下,375的屏幕中1rem=50px。

2.2 CSS方案

采用媒体查询,适配不同宽度,代码略。

Vue配置px自动转rem

postcss-plugin-px2rem介绍

A plugin for PostCSS that generates rem units from pixel units.

也就是说,使用该插件可以自动的将你写px单位转为rem单位,而且不用担心污染问题,因为可以设置选择黑名单。

安装postcss-plugin-px2rem

yarn add postcss-plugin-px2rem

配置

待补充

总结

该方法只适用于对于不同屏幕的屏幕显示相同的比例,对于那些内容式网站则要避免使用该方法。此时,用户选择更多屏幕的目的不是为了看到更大的字体,而是希望能够看到更多的内容。

参考文献

简单粗暴的移动端适配方案 - REM

前言

相信小伙伴们对广告是又爱又恨,一方面不想接受广告的荼毒,另一方面也想接点广告赚点流量收益。由此而来衍生出了两个技术,屏蔽广告与防屏蔽广告。

2020-04-14T09:05:00.png
屏蔽广告

2020-04-14T09:07:07.png
防屏蔽

原理

我们要想做到网站广告不被人屏蔽,首先就要理解屏蔽广告的原理。

1.初阶屏蔽

含ad,推广等字样的js或者class类就直接拦截或者不显示

2.高阶屏蔽

我也不会,但是高阶屏蔽肯定是可以屏蔽低阶广告的。

那么根据这个原理,我们可以发现。只要我们写一个很low很low的广告,然后监听它是否成功加载,如果没有,则跳转页面或者不显示内容。

实现

1. 制造广告

先写一个一眼就能看出来是广告的js文件,例如把js文件名命名
为"adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js"。广告二字赤裸裸的写着,广告的韵味呼之欲出。

2. 定义变量

在js里面定义一个变量,比如:

var adskilltest=true;

3. 监听广告变量

页面文件中读取该变量

不管怎么样,只要被拦截,那就肯定是undefined。让个极其肤浅的广告命名,来检测是否有屏蔽广告,这叫引蛇出洞!

2020-04-14T09:20:46.png

大功告成!

4. 后续操作

既然被拦截,就要做出点反应。有了反应之后呢,还需要保存当时浏览的页面连接。我的解决方法是写一个noads.html负责显示被拦截后的内容以及保存跳转前的链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温馨提示</title>
</head>
<body>
<p>网站内容被识别为广告,已被屏蔽。请禁用广告屏蔽后点击下面链接哦!</p>
<a href="#" id="a">我已关闭广告屏蔽功能</a>
</body>
<script>
    function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
document.getElementById("a").href = getQueryVariable('route');
</script>
</html>
tips: 该方法不是最优,但是可行!