TOMMYHU

遇到的问题以及解决方法
问题一
ts 无法识别$ref

解决方法
① 直接在 this.$refs.xxx 后面申明类型如：
[codes=c#]
this.$refs.lyricsLines as HTMLDivElement;
[/codes]
② 在export default class xxx extends Vue里面声明全部的$ref 的类型
[codes=c#]
$refs: {
    audio: HTMLAudioElement,
    lyricsLines: HTMLDivElement
}
[/codes]

问题二
ts 无法识别 require

解决方法

安装声明文件
[codes=c#]
yarn add @types/webpack-env -D
[/codes]


问题三
运行npm run build 出现


解决方法
[codes=c#]
You can fix this by using the most recent beta version of uglifyjs-webpack-plugin. Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.

If you do yarn add uglifyjs-webpack-plugin@beta --dev or npm install uglifyjs-webpack-plugin@beta --save-devyou should receive the latest beta which does successfully minify es6 syntax. We are hoping to have this released from beta extremely soon, however it should save you from errors for now!
[/codes]
也就是说升级你的uglifyjs-webpack-plugin版本：
[codes=c#]
yarn add uglifyjs-webpack-plugin@beta --dev
[/codes]


问题四
vue-property-decorator 装饰器写法不对。当时我是要把 mixins，注入到组件里，我就这样写：

ts提示找不到 mixin。我就很纳闷为什么找不到名字，由于官网vue-property-decorator例子太少，只好一步一步摸索?

解决方法

把mixins写在@Component里面…，像这样：

注意点
如果你引用第三方无类型声明的库，那就需要自己编写x.d.ts文件
如果引用 ui 组件的时候，如果控制台出现Property '$xxx' does not exist on type 'App'的话，那么可以在vue-shim.d.ts增加
[codes=c#]
declare module 'vue/types/vue' {
  interface Vue {
    $xxx: any,
  }
}
[/codes]

[codes=c#]
#clone分支
git clone -b dev https://xxxx

#导出两个分支的差异项目到targ包
git diff c912663 8db63965 --name-only | xargs tar -czvf ./update20181218.tar.gz
[/codes]

vue-tools vue程序员必备，实时查看组件data数据和vuex数据等


juejing 掘金谷歌插件，实时显示热门技术


草料，显示当前页面为二维码

屌丝看英文文档神器

直接在浏览器中打开接口，会以JSON格式显示

　　CommonJS, AMD, CMD都是JS模块化的规范。

　　CommonJS是服务器端js模块化的规范，NodeJS是这种规范的实现。

　　AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD，SeaJS 遵循的是 CMD。



一、CommonJS

　　根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。所以，定义一个模块就是写一个新的js文件，但是最后要将文件的内容exports出来。接下来我们看一下如何定义模块和加载模块。

[codes=c#]
//定义一个module.js文件
var A = function() {
    console.log('我是定义的模块');
}
//导出这个模块
//1.第一种返回方式 module.exports = A;
//2.第二种返回方式 module.exports.test = A
//3.第三种返回方式 exports.test = A;
exports.test = A;



//再写一个test.js文件，去调用刚才定义好的模块，这两个文件在同一个目录下
var module = require("./module");  //加载这个模块


//调用这个模块，不同的返回方式用不同的方式调用
//1.第一种调用方式 module();
//2.第二种调用方式 module.test();
//3.第三种调用方式 module.test();
module.test();
[/codes]

//接下来我们去执行这个文件，前提是你本地要安装node.js，不多说了，自己百度安装。
//首先打开cmd, cd到这两个文件所在的目录下,执行: node test.js
node test.js
//输出结果：我是定义的模块
复制代码
　　当我们执行 node test.js 的时候，根据 var module = require("./module"); 会加载同一目录下的module.js文件，并将这个文件的exports对象返回，赋值给module，所以我们调用 module.test(); 就相当于执行了module.js文件。

　　以上就是CommonJS规范下的模块定义与加载的形式。

　　CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD  CMD 解决方案。



二、AMD（异步模块定义）

　　AMD规范通过define方法去定义模块，通过require方法去加载模块。RequireJS实现了这种规范。

　　AMD只有一个接口：define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中。要是没什么依赖，就定义简单的模块（或者叫独立的模块），下面我们看代码实现：

[codes=c#]
//编写一个module1.js文件
//定义独立的模块
define({
    methodA: function() {
        console.log('我是module1的methodA');    
    },
    methodB: function() {
        console.log('我是module1的methodB');    
    }
});



//编写一个module2.js文件
//另一种定义独立模块的方式
define(function () {
    return {
        methodA: function() {
            console.log('我是module2的methodA');    
        },
        methodB: function() {
            console.log('我是module2的methodB');    
        }
    };
});



//编写一个module3.js文件
//定义非独立的模块（这个模块依赖其他模块）
define(['module1', 'module2'], function(m1, m2) {
    return {
        methodC: function() {
            m1.methodA();
            m2.methodB();
        }
    };

});



//再定义一个main.js，去加载这些个模块
require(['module3'], function(m3){
    m3.methodC();
});


//我们在一个html文件中去通过RequireJS加载这个main.js
//等号右边的main指的main.js

[/codes=
//浏览器控制台输出结果
我是module1的methodA
我是module2的methodB
复制代码
　　以上就是AMD规范的模块定义和加载的形式，ReauireJS实现了这种规范。所以我们的例子也借助RequireJS去实现。



三、CMD（通用模块定义）

　　CMD是SeaJS 在推广过程中对模块定义的规范化产出。

　　AMD和CMD的区别：

　　1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible（尽可能的懒加载，也称为延迟加载，即在需要的时候才加载）。

　　2. CMD 推崇依赖就近，AMD 推崇依赖前置。
　　虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。看代码：

[codes=c#]
// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    // 此处略去 100 行
    var b = require('./b');   // 依赖可以就近书写
    b.doSomething();
    // ...
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething();
    // 此处略去 100 行
    b.doSomething();
    //...
})
[/codes]
　　3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

使用webpack的插件DllPlugin加快打包速度
https://segmentfault.com/a/1190000012925212
链接无法访问直接下载离线网页

[codes=c#]
npm run dev 警告：
No parser and no filepath given, using ‘babylon’ the parser now but this will throw an error in the future. Please specify a parser or a filepath so o
ne can be inferred.

解决办法：
npm install vue-loader@13.7.2 –save-dev
[/codes]
webpack有各种包依赖，如果某个包版本之后会出现此类报错，修改package.json的包版本，重新执行npm i或者cnpm更新包到最新版本即可

IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式：
[codes=c#]
    
    
[/codes]
      还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致CSS3失效。看来，需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是IE8就输出content="IE=8"，如果是IE9就输出content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下：
  [codes=c#]   [/codes]
        
      经测试后完美解决了兼容模式问题，这样设置后IE中设置兼容模式的按钮也会消失，可以按F12打开“开发人员工具”来检查浏览器模式。

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储



然而，今天我要说的是“localStorage如何实现定时存储”，正常情况下，localStorage存入key-value后，可以永久使用（前提：不清理cookie操作）.
但是，项目中，我们或许需要实现1.需要在间隔某段时间后，刷新所存的值;2.存储一段时间，而非永久；

解决思路，由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。所以我们需要在存取方面重新处理，先上代码：
[codes=c#]
//定时 缓存
var MyLocalStorage ={    
    Cache : {      
      /**
       * 总容量5M
       * 存入缓存，支持字符串类型、json对象的存储
       * 页面关闭后依然有效 ie7+都有效
       * @param key 缓存key
       * @param stringVal
       * @time 数字 缓存有效时间（秒） 默认60s
       * 注：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。不能控制缓存时间，故此扩展
       * */
      put : function(key,stringVal,time){
        try{
          if(!localStorage){return false;}
          if(!time || isNaN(time)){time=60;}
          var cacheExpireDate = (new Date()-1)+time*1000;
          var cacheVal = {val:stringVal,exp:cacheExpireDate};
          localStorage.setItem(key,JSON.stringify(cacheVal));//存入缓存值
          //console.log(key+":存入缓存，"+new Date(cacheExpireDate)+"到期");
        }catch(e){}  
      },
      /**获取缓存*/
      get : function (key){
        try{
          if(!localStorage){return false;}
          var cacheVal = localStorage.getItem(key);
          var result = JSON.parse(cacheVal);
          var now = new Date()-1;
          if(!result){return null;}//缓存不存在
          if(now>result.exp){//缓存过期
            this.remove(key);          
            return "";
          }
          //console.log("get cache:"+key);
          return result.val;
        }catch(e){
          this.remove(key);
          return null;
        }
      },/**移除缓存，一般情况不手动调用，缓存过期自动调用*/
      remove : function(key){
        if(!localStorage){return false;}
        localStorage.removeItem(key);
      },/**清空所有缓存*/
      clear : function(){
        if(!localStorage){return false;}
        localStorage.clear();
      }
    }//end Cache
}
//调用方法1.存入用户信息1天,并取出
var user = {name:'demo1',nickName:'测试账号'}
MyLocalStorage.Cache.put("cookieKey",user,1*24*60*60);//存储一天
MyLocalStorage.Cache.get("cookieKey");//得到的是Object {name: "demo1", nickName: "测试账号"}，如果过期，此处取到的是空字符串
//调用方法2.存入字符串1分钟
var str = "xxx存入localStorage";
MyLocalStorage.Cache.put("cookieKey",str,60);//存储一天
//其他移除、清空等操作，在此我便无需写了，相信各位一看便知。

[/codes]

那如何实现数据过期则查询后台的数据，数据未过期，就使用存储的数据呢？
ajax请求数据为例：
[codes=c#]
function getHotList(){
  //本地无数据或数据过期，则通过请求查询数据库，同时将查询得到的结果，存入本地，下次刷新页面，无需请求数据库，直接使用本地数据，提升效率
  var cacheKey = "CACHE-HotWords";
  $(".search-hot-words").html("");
  if($(".search-hot-words").length==0){return false;}
  try{
    var cache = MyLocalStorage.Cache.get(cacheKey);
    if(cache){
      $(".search-hot-words").html(cache);
      return false;
    }
  }catch(e){}

  $.post(basePath+"hotwords/list",{limit:7,t:new Date()-1},function(result){
    try{
      result = JSON.parse(result);
      if(result.status!=1){return false;}
      if(result.data.length>0){/*no data hide*/
        var hotTags = "";
        for(var i = 0,max = result.data.length ; i < max; i++){
          hotTags += ''+result.data[i][0]+'';
        }
        $(".search-hot-words").html(hotTags);
        MyLocalStorage.Cache.put(cacheKey,hotTags,24*60*60);//24小时 此处存入的直接是html代码片段，（可以直接存入后台返回的json）因人而异
      }
    }catch(e){}
  });
}

[/codes]
最后提醒各位， 1.使用此方式存储(包括localStorage,sessionStoraage)，需注意用户隐私：重要机密信息就不要使用localStorage了，慎重使用，毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。