vue学习、使用总结

vue总结

1. 路由懒加载

/*-----------*/
function loadPage( url  , chunk) {
  if(chunk){
    /*-------把chunk一样的合并打包到一个js------*/
    return r => require.ensure( [], () => r(require(`@/pages/${url}`)), chunk );
    //  return () => import( /* webpackChunkName: "group-foo" */ `@/pages/${url}`) //无法使用chunk变量
  }else {
    /*-------每个路由，单独打包成对应的js------*/
    return resolve => require([`@/pages/${url}}`], resolve);
    //或者return () => import(`@/pages/${url}`);
  }
}
const index = loadPage('index' , 'main'); //chunk 为main的页面会打包一个js里面
const login= loadPage('login' , 'main'); //chunk 为main的页面会打包一个js里面
const register = loadPage('register'); 
new Router({
  //modes : 'hash',
  routers:[
    {
      path: '/index',
      component: loadPage('index') || index, // 1: 可以使用上边的变量 / 或直接就在这导入
      meta:{index:0,title:'首页'}
    },
    {
      path: '/login',
      component: loadPage('login') || login,
      meta:{index:0,title:'首页'}
    }
  ]
});

2. 重要设置

 1 ： `config > index`里面productionSourceMap有必要设置成false，就不会出现dist的map文件。
 2：main.js只导入必要组件，各个组件应该单独封装
 3：页面内部导入组件类似 路由懒加载写法，不能头部直接import(' **** ');

3. 加载公司公用的外部js插件 示例为同盾验证

export default function tdPublic (param , callback ) {
  if (!param || !callback || !(param instanceof Object) || !(typeof callback == 'function')) {
    console.log('参数格式错误');
    return false;
  }
  let fm;
  let tdJsClass = 'tdScript';
  function addScript() {
    window._fmOpt = {
      display: 'bind', //popup方式渲染验证码
      container: '', //验证码button渲染的目标DOM，自动展现方式下必需，详情见后文
      area: '.customForm', //对于custom模式，弹出窗口的加载容器，详情见后文
      partner: "renrenkj",
      appName: "renrenkj_h5",
      fmb: true,
      initialTime: new Date().getTime(),
      token: "renrenkj" + "-" + new Date().getTime() + "-" + Math.random().toString(16).substr(2),
      getinfo: function () {
        return "e3Y6ICIyLjUuMCIsIG9zOiAid2ViIiwgczogMTk5LCBlOiAianMgbm90IGRvd25sb2FkIn0=";
      },
    };
    fm = document.createElement('script');
    fm.type = 'text/javascript';
    fm.setAttribute('class', tdJsClass);
    fm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.tongdun.net/captcha/main/tdc.js?ver=1.0&t=' + (new Date().getTime() / 600000).toFixed(0);
    let s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(fm, s);
    s = fm = null;
  }
  let id = param.container || ''; //id
  if (!id || !(param.width) || !(param.height)) {
    console.log('container / width / height 必传');
    return false;
  }
  let tdParams = {
    //popup/float/custom/bind
    display: param.display || 'bind',
    container: id,
    width: param.width || '100%',
    height: param.height || '100%'
  };
  let count = 0;//限制次数
  function initTd() {
    tdScript = null;
    let timeout = null;
    if (!window._fmOpt || !(window._fmOpt.newCaptcha)) {
      count++;
      if( count === 50){
        clearTimeout(timeout);
        timeout = null;
        count = null;
        return;
      }
      timeout = setTimeout(function() {
        console.log('_fmOpt同盾资源未加载,重新调用');
        initTd(); //递归调用，防止_fmOpt资源未加载完毕
        clearTimeout(timeout);
        timeout = null;
      }, 100);
      return;
    }
    let newTd = window._fmOpt.newCaptcha(tdParams);
    if( param.beforeValidate && param.beforeValidate instanceof Function){
      newTd.beforeValidate = function () {
        return param.beforeValidate();
      };
    }
    newTd.onSuccess = function(validateToken) {
      if (validateToken) {
        let result = {
          validateToken: validateToken,
          blackBox: window._fmOpt.getinfo(),
          // newTd : newTd,//返回_fmOpt
          reset : newTd.reset,//返回重载同盾方法
          // removeTd : function () { //删除页面同盾弹窗
          //   let tdEle = document.getElementsByClassName('td-outer-wrapper')[0];
          //   if( tdEle ) {
          //     tdEle.remove();//防止点开验证，直接点击返回其他页面，同盾弹窗还在
          //   }
          //   tdEle = null;
          // }
        };
        tdParams = null;
        id = id.slice(1, id.length);
        timeout = setTimeout(function(){
          callback(result);
          clearTimeout(timeout);
          timeout = null;
        },800)
      }
      else {
        newTd.reset();
      }
    };
    initTd = null;
  }
  let tdScript = document.getElementsByClassName(tdJsClass)[0];

  if (!tdScript) {
    //防止重载js
    addScript();
  }
  initTd();
};
  //同盾使用
  // let tdParams = {
  //           display: 'popup',
  //           container: '#td' + Math.floor(Math.random()*(1-10000) + 10000),//绑定id加id随机数
  //           width:'2.65rem',
  //           height:'1.2rem'
  //         };
  //  tdPublic( tdParams, function (ret) {
  //             thiz.yzm_token = ret.validateToken；//返回token
  //             thiz.blackBox = ret.blackBox;  //getInfo值
  //             thiz.rest = ret.reset;
  //           });