VueJs項目筆記

======================知識點總結===========================

1、keep-alive(實現頁面的緩存)

2、 移動端固定定位的解決方案

3、 Vue表單校驗

• [https://www.zhihu.com/questio...
• 99220](https://www.zhihu.com/questio... "Vue表單驗證")
• https://github.com/aweiu/vue-verify-pop

• vue-validator中文文檔

  • https://github.com/kazupon/vu...

橫向滑動的tab選項卡，以及輸入法定位相關的

• JQ插件網http://jq22.com
• 當第一個輸入框自動得到光標的時候，彈出的輸入法會把佈局頂上去

問題1：能夠左右滑動的tab

• 將項目中引入Jq框架和tab插件

當第一個輸入框自動得到光標的時候，彈出的輸入法會把佈局頂上去?

• 給最外層盒子加上絕對定位,而且設置固定高度

  .reg-layer {
     width: 100%;
     height: 360px;
     background: #ffffff;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
   }

• 再給登陸框設置固定

  .login-main {
     width: 100%;
     height: 4rem;
     background-color: #ffffff;
     padding-top: 0.4rem;
   }

怎麼去加載一倍圖，二倍圖，三倍圖等

• 使用Retina.js

上拉刷新、下拉加載更多

• VUe-Scroller

  • https://github.com/wangdahoo/...

登陸註冊

• VueJs保存token
• 判斷token失效

VueJs保存token

• http://blog.csdn.net/generon/...
• https://segmentfault.com/q/10...
• http://www.jb51.net/article/1...
• http://shequ.jb51.net/q_1599....

Vue-cli proxyTable 解決開發環境的跨域問題

• http://blog.csdn.net/hsany330...
• https://segmentfault.com/q/10...

使用localStorage解決vuex在頁面刷新後數據被清除的問題

• http://www.cnblogs.com/limeng...

如何在vue中實現路由跳轉判斷用戶權限功能？

• https://segmentfault.com/q/10...

Axios

• http://www.cnblogs.com/libin-...

Ju Network Status By JS

• https://github.com/HubSpot/of...
• https://segmentfault.com/a/11...
• https://segmentfault.com/q/10...
• http://wicg.github.io/netinfo/

Web App Notes

• http://blog.csdn.net/zhangxin...

Axios WebSite Address

• http://www.kancloud.cn/yunye/...

No NetWork SPA

• https://github.com/NekR/offli...

VueJS Communication among brothers

• http://www.cnblogs.com/zsongs...

webpack多頁應用架構系列

• https://segmentfault.com/a/11...

Vue-Cli配置文件分析

• http://blog.csdn.net/hongchh/...
• http://blog.csdn.net/s8460049...

下拉刷新

• 獲取VueScroller實例:this.$refs.my_scroller
• 顯示沒有更多數據了，在那個infinate()方法中調用done(true)就OK了
• http://www.cnblogs.com/liangx...
• http://m.codes51.com/article/...

Vue-Cli打包發佈

• http://www.cnblogs.com/libin-...
• http://www.tuicool.com/articl...

移動端-webkit-user-select:none致使input/textarea輸入框沒法輸入

• http://www.qdfuns.com/notes/1...
• http://www.jianshu.com/p/4108...

VueJs判斷Token過時

• http://www.tuicool.com/articl...

Axios中的delete請求

• https://github.com/pagekit/vu...

VueJs移動端圖片壓縮上傳

• https://my.oschina.net/myrain...

• 圖片壓縮插件

  • https://github.com/think2011/...

React Note

• http://www.runoob.com/react/r...

Refresh Current Page

_this.$router.go(0);

How I can config https in Vue-Cli

• https://segmentfault.com/q/10...

use Vue-Scroller

{
    test: /vue-scroller.src.*?js$/,
    loader: 'babel-loader'
  }

• It can invoked inflate() method automatically when vue component is mounted,there is a way to solve this problem

  this.$refs.my_scroller.finishInfinite(true);

Wechat share in VueJs Projects

• http://www.cnblogs.com/mingxi...
• https://segmentfault.com/q/10...

微信公衆號

• https://mp.weixin.qq.com/cgi-...

UpLoad File In VueJs

• https://github.com/marchFanta...
• https://github.com/lian-yue/v...
• https://github.com/mozilla/pd...

Show PDF In Broswer

• Using Pdf.js
• https://segmentfault.com/q/10...
• https://github.com/mozilla/pd...
• https://stackoverflow.com/que...

Show PDF In Broswer Code

• http://localhost:63342/pdf.js-gh-pages/examples/index.html?_ijt=s4h3uipnnk8bec8b1ddn82mqnn

• it must be contain a canvas tag

  import PDFJS from 'pdfjs-dist';
  showPDF(){
          let pdfPath = '/static/compressed.tracemonkey-pldi-09.pdf';
          let  loadingTask = PDFJS.getDocument(pdfPath);
          loadingTask.promise.then(function (pdfDocument) {
            // Request a first page
            return pdfDocument.getPage(1).then(function (pdfPage) {
              console.log("pdfPage is :",pdfPage);
              // Display page on the existing canvas with 100% scale.
              let scale = 1.5;    
              let viewport = pdfPage.getViewport(scale);
              let canvas = document.getElementsByClassName('theCanvas');
              canvas.width = viewport.width;
              canvas.height = viewport.height;
              let ctx = canvas.getContext('2d');
              let renderTask = pdfPage.render({
                canvasContext: ctx,
                viewport: viewport
              });
              return renderTask.promise;
            });
          }).catch(function (reason) {
            console.error('Error: ' + reason);
          });
        },

DownLoad files

• https://www.npmjs.com/package...

PDF.js怎麼一次性的加載完全部的pdf的內容

在進行文件(pdf、word)等的上傳中，怎麼區分?

• http://blog.csdn.net/shenshen...
• article/details/21626315
• accept="application/msexcel" ----對應上傳excel
• accept="application/msword" ----對應上傳word
• accept="application/pdf" ----對應上傳pdf

PDF.js Example

• https://github.com/mozilla/pd...

PDF.js Frequently Asked Questions

• https://github.com/mozilla/pd...

PDFViewer.vue

<template>
  <div class="pdf-view-layout">
    <header>
      <h1 id="title"></h1>
    </header>

    <div id="viewerContainer">
      <div id="viewer" class="pdfViewer"></div>
    </div>

    <div id="loadingBar">
      <div class="progress"></div>
      <div class="glimmer"></div>
    </div>

    <div id="errorWrapper" hidden="true">
      <div id="errorMessageLeft">
        <span id="errorMessage"></span>
        <button id="errorShowMore">
          More Information
        </button>
        <button id="errorShowLess">
          Less Information
        </button>
      </div>
      <div id="errorMessageRight">
        <button id="errorClose">
          Close
        </button>
      </div>
      <div class="clearBoth"></div>
      <textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
    </div>

    <footer>
      <button class="toolbarButton pageUp" title="Previous Page" id="previous" @click="goNextPage()"></button>
      <button class="toolbarButton pageDown" title="Next Page" id="next"></button>

      <input type="number" id="pageNumber" class="toolbarField pageNumber"  size="4" min="1" >
      <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut"></button>
      <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn"></button>
    </footer>
  </div>
</template>
<script>
  //加載PDFJS
  import pdf from '../../../node_modules/pdfjs-dist/build/pdf.js';
  import pdfViewer from '../../../node_modules/pdfjs-dist/web/pdf_viewer.js';
  import Viewer from '../../assets/js/viewer';
  export default{
    data(){
      return{
        myPage:1,
      }
    },
    mounted(){
        const url = 'http://192.168.0.200:8080/media/avatar/fluent-python.pdf';
        Viewer.animationStartedPromise.then(function () {
          Viewer.open({
            url: url
          });
        });
    },
    methods:{
      goNextPage(){
          console.log('下一頁的數據');
      }
    },
    watch:{
      myPage(newV,oldV){
          console.log("==================：",$('#pageNumber').val());
      }
    },
  }
</script>
<style scoped>
  @import "../../assets/css/viewer.css";
</style>

viewer.js

/* Copyright 2016 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* globals PDFJS */

'use strict';

if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
  alert('Please build the pdfjs-dist library using\n' +
        '  `gulp dist-install`');
}

PDFJS.useOnlyCssZoom = true;
PDFJS.disableTextLayer = true;
PDFJS.maxImageSize = 1024 * 1024;
PDFJS.workerSrc = '../../../node_modules/pdfjs-dist/build/pdf.worker.js';
PDFJS.cMapUrl = '../../../node_modules/pdfjs-dist/cmaps/';
PDFJS.cMapPacked = true;
//須要加載的pdf的文件
// var DEFAULT_URL = 'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf';
// var DEFAULT_URL = 'http://192.168.0.200:8080/media/avatar/fluent-python.pdf';
var DEFAULT_SCALE_DELTA = 1.0;
var MIN_SCALE = 0.25;
var MAX_SCALE = 100.0;
var DEFAULT_SCALE_VALUE = 'auto';

var PDFViewerApplication = {
  pdfLoadingTask: null,
  pdfDocument: null,
  pdfViewer: null,
  pdfHistory: null,
  pdfLinkService: null,

  /**
   * Opens PDF document specified by URL.
   * @returns {Promise} - Returns the promise, which is resolved when document
   *                      is opened.
   */
  open: function (params) {
    if (this.pdfLoadingTask) {
      // We need to destroy already opened document
      return this.close().then(function () {
        // ... and repeat the open() call.
        return this.open(params);
      }.bind(this));
    }

    var url = params.url;
    var self = this;
    this.setTitleUsingUrl(url);

    // Loading document.
    var loadingTask = PDFJS.getDocument(url);
    this.pdfLoadingTask = loadingTask;

    loadingTask.onProgress = function (progressData) {
      self.progress(progressData.loaded / progressData.total);
    };

    return loadingTask.promise.then(function (pdfDocument) {
      // Document loaded, specifying document for the viewer.
      self.pdfDocument = pdfDocument;
      self.pdfViewer.setDocument(pdfDocument);
      self.pdfLinkService.setDocument(pdfDocument);
      self.pdfHistory.initialize(pdfDocument.fingerprint);
      self.loadingBar.hide();
      self.setTitleUsingMetadata(pdfDocument);
    }, function (exception) {
      var message = exception && exception.message;
      var l10n = self.l10n;
      var loadingErrorMessage;

      if (exception instanceof PDFJS.InvalidPDFException) {
        // change error message also for other builds
        loadingErrorMessage = l10n.get('invalid_file_error', null,
          'Invalid or corrupted PDF file.');
      } else if (exception instanceof PDFJS.MissingPDFException) {
        // special message for missing PDFs
        loadingErrorMessage = l10n.get('missing_file_error', null,
          'Missing PDF file.');
      } else if (exception instanceof PDFJS.UnexpectedResponseException) {
        loadingErrorMessage = l10n.get('unexpected_response_error', null,
          'Unexpected server response.');
      } else {
        loadingErrorMessage = l10n.get('loading_error', null,
          'An error occurred while loading the PDF.');
      }

      loadingErrorMessage.then(function (msg) {
        self.error(msg, {message: message});
      });
      self.loadingBar.hide();
    });
  },

  /**
   * Closes opened PDF document.
   * @returns {Promise} - Returns the promise, which is resolved when all
   *                      destruction is completed.
   */
  close: function () {
    var errorWrapper = document.getElementById('errorWrapper');
    errorWrapper.setAttribute('hidden', 'true');

    if (!this.pdfLoadingTask) {
      return Promise.resolve();
    }

    var promise = this.pdfLoadingTask.destroy();
    this.pdfLoadingTask = null;

    if (this.pdfDocument) {
      this.pdfDocument = null;

      this.pdfViewer.setDocument(null);
      this.pdfLinkService.setDocument(null, null);
    }

    return promise;
  },

  get loadingBar() {
    var bar = new PDFJS.ProgressBar('#loadingBar', {});

    return PDFJS.shadow(this, 'loadingBar', bar);
  },

  setTitleUsingUrl: function pdfViewSetTitleUsingUrl(url) {
    this.url = url;
    var title = PDFJS.getFilenameFromUrl(url) || url;
    try {
      title = decodeURIComponent(title);
    } catch (e) {
      // decodeURIComponent may throw URIError,
      // fall back to using the unprocessed url in that case
    }
    this.setTitle(title);
  },

  setTitleUsingMetadata: function (pdfDocument) {
    var self = this;
    pdfDocument.getMetadata().then(function(data) {
      var info = data.info, metadata = data.metadata;
      self.documentInfo = info;
      self.metadata = metadata;

      // Provides some basic debug information
      console.log('PDF ' + pdfDocument.fingerprint + ' [' +
                  info.PDFFormatVersion + ' ' + (info.Producer || '-').trim() +
                  ' / ' + (info.Creator || '-').trim() + ']' +
                  ' (PDF.js: ' + (PDFJS.version || '-') +
                  (!PDFJS.disableWebGL ? ' [WebGL]' : '') + ')');

      var pdfTitle;
      if (metadata && metadata.has('dc:title')) {
        var title = metadata.get('dc:title');
        // Ghostscript sometimes returns 'Untitled', so prevent setting the
        // title to 'Untitled.
        if (title !== 'Untitled') {
          pdfTitle = title;
        }
      }

      if (!pdfTitle && info && info['Title']) {
        pdfTitle = info['Title'];
      }

      if (pdfTitle) {
        self.setTitle(pdfTitle + ' - ' + document.title);
      }
    });
  },
  /**
   * 設置title標題
   * @param title
   */
  setTitle: function pdfViewSetTitle(title) {
    document.title = title;
    console.log("document.title:",document.title,document,document.getElementById('title').textContent);
    if(document.getElementById('title').textContent!==''){
      document.getElementById('title').textContent = title;
    }
  },

  error: function pdfViewError(message, moreInfo) {
    var l10n = this.l10n;
    var moreInfoText = [l10n.get('error_version_info',
      {version: PDFJS.version || '?', build: PDFJS.build || '?'},
      'PDF.js v{{version}} (build: {{build}})')];

    if (moreInfo) {
      moreInfoText.push(
        l10n.get('error_message', {message: moreInfo.message},
          'Message: {{message}}'));
      if (moreInfo.stack) {
        moreInfoText.push(
          l10n.get('error_stack', {stack: moreInfo.stack},
            'Stack: {{stack}}'));
      } else {
        if (moreInfo.filename) {
          moreInfoText.push(
            l10n.get('error_file', {file: moreInfo.filename},
              'File: {{file}}'));
        }
        if (moreInfo.lineNumber) {
          moreInfoText.push(
            l10n.get('error_line', {line: moreInfo.lineNumber},
              'Line: {{line}}'));
        }
      }
    }

    var errorWrapper = document.getElementById('errorWrapper');
    errorWrapper.removeAttribute('hidden');

    var errorMessage = document.getElementById('errorMessage');
    errorMessage.textContent = message;

    var closeButton = document.getElementById('errorClose');
    closeButton.onclick = function() {
      errorWrapper.setAttribute('hidden', 'true');
    };

    var errorMoreInfo = document.getElementById('errorMoreInfo');
    var moreInfoButton = document.getElementById('errorShowMore');
    var lessInfoButton = document.getElementById('errorShowLess');
    moreInfoButton.onclick = function() {
      errorMoreInfo.removeAttribute('hidden');
      moreInfoButton.setAttribute('hidden', 'true');
      lessInfoButton.removeAttribute('hidden');
      errorMoreInfo.style.height = errorMoreInfo.scrollHeight + 'px';
    };
    lessInfoButton.onclick = function() {
      errorMoreInfo.setAttribute('hidden', 'true');
      moreInfoButton.removeAttribute('hidden');
      lessInfoButton.setAttribute('hidden', 'true');
    };
    moreInfoButton.removeAttribute('hidden');
    lessInfoButton.setAttribute('hidden', 'true');
    Promise.all(moreInfoText).then(function (parts) {
      errorMoreInfo.value = parts.join('\n');
    });
  },

  progress: function pdfViewProgress(level) {
    var percent = Math.round(level * 100);
    // Updating the bar if value increases.
    if (percent > this.loadingBar.percent || isNaN(percent)) {
      this.loadingBar.percent = percent;
    }
  },

  get pagesCount() {
    return this.pdfDocument.numPages;
  },

  set page(val) {
    this.pdfViewer.currentPageNumber = val;
  },

  get page() {
    return this.pdfViewer.currentPageNumber;
  },

  zoomIn: function pdfViewZoomIn(ticks) {
    var newScale = this.pdfViewer.currentScale;
    do {
      newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(2);
      newScale = Math.ceil(newScale * 10) / 10;
      newScale = Math.min(MAX_SCALE, newScale);
    } while (--ticks && newScale < MAX_SCALE);
    this.pdfViewer.currentScaleValue = newScale;
  },

  zoomOut: function pdfViewZoomOut(ticks) {
    var newScale = this.pdfViewer.currentScale;
    do {
      newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(2);
      newScale = Math.floor(newScale * 10) / 10;
      newScale = Math.max(MIN_SCALE, newScale);
    } while (--ticks && newScale > MIN_SCALE);
    this.pdfViewer.currentScaleValue = newScale;
  },

  initUI: function pdfViewInitUI() {
    var linkService = new PDFJS.PDFLinkService();
    this.pdfLinkService = linkService;

    this.l10n = PDFJS.NullL10n;

    var container = document.getElementById('viewerContainer');
    var pdfViewer = new PDFJS.PDFViewer({
      container: container,
      linkService: linkService,
      l10n: this.l10n,
    });
    this.pdfViewer = pdfViewer;
    linkService.setViewer(pdfViewer);

    this.pdfHistory = new PDFJS.PDFHistory({
      linkService: linkService
    });
    linkService.setHistory(this.pdfHistory);

    document.getElementById('previous').addEventListener('click', function() {
      PDFViewerApplication.page--;
    });

    document.getElementById('next').addEventListener('click', function() {
      PDFViewerApplication.page++;
    });

    document.getElementById('zoomIn').addEventListener('click', function() {
      PDFViewerApplication.zoomIn();
    });

    document.getElementById('zoomOut').addEventListener('click', function() {
      PDFViewerApplication.zoomOut();
    });

    document.getElementById('pageNumber').addEventListener('click', function() {
      this.select();
    });

    document.getElementById('pageNumber').addEventListener('change',
        function() {
      PDFViewerApplication.page = (this.value | 0);

      // Ensure that the page number input displays the correct value, even if the
      // value entered by the user was invalid (e.g. a floating point number).
      if (this.value !== PDFViewerApplication.page.toString()) {
        this.value = PDFViewerApplication.page;
      }
    });

    container.addEventListener('pagesinit', function () {
      // We can use pdfViewer now, e.g. let's change default scale.
      pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
    });

    container.addEventListener('pagechange', function (evt) {
      var page = evt.pageNumber;
      var numPages = PDFViewerApplication.pagesCount;

      document.getElementById('pageNumber').value = page;
      document.getElementById('previous').disabled = (page <= 1);
      document.getElementById('next').disabled = (page >= numPages);
    }, true);
  }
};

document.addEventListener('DOMContentLoaded', function () {
  PDFViewerApplication.initUI();
}, true);

(function animationStartedClosure() {
  // The offsetParent is not set until the PDF.js iframe or object is visible.
  // Waiting for first animation.
  PDFViewerApplication.animationStartedPromise = new Promise(
    function (resolve) {
      window.requestAnimationFrame(resolve);
    });
})();

/*// We need to delay opening until all HTML is loaded.
PDFViewerApplication.animationStartedPromise.then(function () {
  PDFViewerApplication.open({
    url: DEFAULT_URL
  });
});*/
export default PDFViewerApplication;

VueJs防止頁面出現閃爍的狀況

• v-cloak指令

  • http://cn.vuejs.org/v2/api/#v...

處理TextArea自動隨文本高度自適應高度

• https://github.com/jackmoore/...

PC端與移動端中option的寬度問題

搜索佈局的問題----子組件去解決

• 路由切換(tab切換)實現不一樣的佈局

VueJs NextTick的妙用

• https://segmentfault.com/a/11...

回到原來的滾動位置以及回到頂部(待完善)

• 當路處於離開狀態的時候，存儲滾動的位置
• 當路由處於進入狀態的時候，取出滾動位置進行判斷，來顯示或隱藏「返回頂部」的按鈕

VueJs自動化測試

• https://segmentfault.com/a/11...
• https://github.com/ccforward/...

Web App中一行文字顯示不下，左邊用...表示

• https://segmentfault.com/q/10...

刷新當前頁面

• this.$router.go(0);

VueJs打包優化

• https://www.zhihu.com/questio...

WebPack中靜態資源url的配置

• http://www.cnblogs.com/chengd...

Vue-Cli webpack配置

• http://www.tuicool.com/articl...

移動端富文本框的集成

• https://quilljs.com/playground/
• vue-html5-editor

Vue-Router中push與replace的區別與聯繫

• https://segmentfault.com/q/10...

VueJs富文本框(發帖功能)

• 移動端:https://github.com/surmon-chi...
• https://github.com/PeakTai/vu...

div設置了contentEditable屬性。android上正常，IOS上出現問題

• 使用div來模擬input或者textarea來進行內容輸入的操做，實現富文本框的功能
• 遇到問題

  加入style="-webkit-user-select: auto"就能出現光標和編輯了

Vuejs-Cordova-Framework-Webapp

• http://blog.gxxsite.com/vuejs...
• vue-cordova

Css-Scroller(效果圖,暫時不用在項目中)

• https://github.com/xiaoluobod...

Scroll開源庫實現列表滾動動畫

• https://github.com/hakimel/st...

H5控制禁止橫屏

• http://www.jianshu.com/p/9c32...

文件上傳(do not)

• https://github.com/marchFanta...

window.open被攔截問題(完成)

• 經過借用a標籤併產生隨機的target去實現

`

s4() {
                  return Math.floor((1 + Math.random()) * 0x10000)
                  .toString(16)
                  .substring(1);
                },
                JsGuid() {
                return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' +
                  this.s4() + '-' + this.s4() + this.s4() + this.s4();
                },
        
                 newWin(url, id,target) {
                  let a = document.createElement('a');
                  a.setAttribute('href', url);
                  a.setAttribute('target', target);
                  a.setAttribute('id', id);
                  // 防止反覆添加
                  if(!document.getElementById(id)) {
                    document.body.appendChild(a);
                  }
                  a.click();
                },

`

• 調用

  this.newWin(localStorage.getItem('url'),"dow","csa"+this.JsGuid());

log工具類(便於在開發過程當中進行調試打印),在上線後將全部log信息隱藏

• code

  /**

  • Created by THINK on 2017/7/3.
  • 日誌工具類：開發階段將flag設置爲true(能夠看見log),上線後將flag設置爲false(看不見log)
  • @author:darkCode
  • @description:it is a logcat tool,you can use it see all logs you want to see conveniently when developing,and you can hide all logs by set the value of flag is false in this instance when producting

*/
            let logUtil = {
              flag:true,
              printLog(...items){
                if(this.flag){
                  console.log(items);
                }
              }
            }
            export default logUtil

修復上拉刷新，下拉加載

• vue-scroller(自動地去進行了加載更多(bug))

對項目進行優化性的操做

• 代碼複用
• 資源的處理

安卓模擬器測試

• 安裝問題：進入Bios系統設置硬件虛擬化

虛擬化技術的能夠在BIOS中開啓，開啓方法以下：

　　一、進入BIOS。開機時按F2或F12或DEL或ESC等鍵(各電腦有所不一樣)。
　　二、進入BIOS後，找到Configuration選項，選擇Intel Virtual Technology並回車，將光標移至Enabled，而後再回車，最後按F10保存並退出。
　　若是找不到Configuration選項，能夠試試下面的方法：
　　(1)某些HP(惠普)電腦進入BIOS後，須要選擇SystemConfiguration(系統配置)菜單，而後選擇Device Configuration(設備配置)，找到Virtualization Technology，設置爲Enabled。
　　(2)某些聯想Thinkpad電腦進入BIOS後，須要選擇Security菜單，而後選擇Virtualization，設置爲Enabled。
　　(3)某些DELL(戴爾)電腦進入BIOS後，須要選擇Processor Settings菜單，而後選擇VirtualizationTechnology，設置爲Enabled。
　　虛擬化在1960年爲了描述虛擬機(實驗性的IBM M44/44X系統)這個概念被第一次提出。對虛擬機的架設和管理被稱爲平臺虛擬化，如今也被稱爲服務器虛擬化。

將業務邏輯代碼與三方代碼分開進行打包

• 在entry入口中配置，如分離jQuery

• 使用vue-cli打包後默認生產三個js文件

  • app.43fcdsfcafds.js:項目中你編寫的業務邏輯的代碼
  • vender.20deewdew32eed.js:經過npm install下載依賴的js,css代碼(node_modules目錄下)
  • manifest.4cbcd0f5d52237fb29b0.js:緩存檢測文件，每次打包，經過該文件進行版本的檢測
• 將生產環境與開發環境中的資源打包使用

vender:3.34m app:1.26m，怎麼去減小它們的體積

• vender.xsaxsxx.js.map文件的做用

source map文件是js文件壓縮後，文件的變量名替換對應、變量所在位置等元信息數據文件，通常這種文件和min.js主文件放在同一個目錄下。 好比壓縮後原變量是map，壓縮後經過變量替換規則可能會被替換成a，這時source map文件會記錄下這個mapping的信息，這樣的好處就是說，在調試的時候，若是有一些JS報錯，那麼瀏覽器會經過解析這個map文件來從新merge壓縮後的js,使開發者能夠用未壓縮前的代碼來調試，這樣會給咱們帶來很大的方便！

文件的按需加載(搞定)---項目優化的一大步

• 根據vue的路由去按需加載組件

  • http://www.cnblogs.com/Nutrie...
• vue組件的按需加載:解決了打包事後app.xscs3243rcds.js文件過大的缺點
• 進一步優化(三方不太動的js文件,經過cdn去加載)
• 引用相同的模塊，打包後出現重複的資源,將三方的單獨進行打包

WebPack代碼分割

• https://zhuanlan.zhihu.com/p/...

WebPack中文網

• https://doc.webpack-china.org...

VueJs Seo(Nuxt.js)

• https://segmentfault.com/a/11...
• https://segmentfault.com/q/10...

WeChat微信分享

• http://blog.csdn.net/rj0902/a...
• http://blog.csdn.net/kexiuyi/...
• http://blog.csdn.net/u0132921...
• http://www.jb51.net/article/1...
• http://www.cnblogs.com/mingxi... cool)

• 微信網頁受權

  • https://mp.weixin.qq.com/wiki...

Vue-Cli中引入weixin-js-sdk

• https://www.npmjs.com/package...

• 蘋果手機上設置分享的title的問題

  • https://www.deboy.cn/set-wech...

• 微信分享

  • https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
• 問題1：判斷是不是微信瀏覽器打開應用，是，須要動態去設置帖子詳情頁的分享界面

isWeiXin(){
        //判斷是不是微信瀏覽器
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) === 'micromessenger') {
          return true;
        } else {
          return false;
        }
      },

• 分享實現流程

  • ①安裝微信sdk npm install weixin-js-sdk --save-dev
  • ②經過import或者require的方式將其引入到須要的組件中
  • ③獲取簽名相關的信息

  • ④經過config接口注入權限驗證配置

    wx.config({
    debug: true, 
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
    });

  • ⑤經過ready接口處理成功驗證

    wx.ready(function(){
    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
            //進行分享的操做
             //分享到朋友圈
              wx.onMenuShareTimeline({
                title: '測試信息', // 分享標題
                link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                imgUrl: '', // 分享圖標
                success: function (res) {
                  // 用戶確認分享後執行的回調函數
                  logUtil.printLog("分享到朋友圈成功返回的信息爲:",res);
                },
                cancel: function (res) {
                  // 用戶取消分享後執行的回調函數
                  logUtil.printLog("取消分享到朋友圈返回的信息爲:",res);
                }
              });
              //分享給朋友
              wx.onMenuShareAppMessage({
                title: '', // 分享標題
                desc: '', // 分享描述
                link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                imgUrl: '', // 分享圖標
                type: '', // 分享類型,music、video或link，不填默認爲link
                dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
                success: function (res) {
                  // 用戶確認分享後執行的回調函數
                  logUtil.printLog("分享給朋友成功返回的信息爲:",res);
                },
                cancel: function (res) {
                  // 用戶取消分享後執行的回調函數
                  logUtil.printLog("取消分享給朋友返回的信息爲:",res);
                }
              });
              //分享到QQ
              wx.onMenuShareQQ({
                title: '', // 分享標題
                desc: '', // 分享描述
                link: '', // 分享連接
                imgUrl: '', // 分享圖標
                success: function (res) {
                  // 用戶確認分享後執行的回調函數
                  logUtil.printLog("分享到QQ好友成功返回的信息爲:",res);
                },
                cancel: function (res) {
                  // 用戶取消分享後執行的回調函數
                  logUtil.printLog("取消分享給QQ好友返回的信息爲:",res);
                }
              });
              //分享到QQ空間
              wx.onMenuShareQZone({
                title: '', // 分享標題
                desc: '', // 分享描述
                link: '', // 分享連接
                imgUrl: '', // 分享圖標
                success: function (res) {
                  // 用戶確認分享後執行的回調函數
                  logUtil.printLog("分享到QQ空間成功返回的信息爲:",res);
                },
                cancel: function (res) {
                  // 用戶取消分享後執行的回調函數
                  logUtil.printLog("取消分享到QQ空間返回的信息爲:",res);
                }
              });
    });

  • ⑥經過error接口處理失敗驗證

    • wx.error(function(res){

// config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});

• 簽名由:noncestr(簽名隨機字符串,隨便寫)、jsapi_ticket(票據)、timestamp(時間戳)、url(必須所有小寫)等組成

• 獲取access_token

  請求接口:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret
  請求方法: get
  返回結果: access_token (有效期7200秒，必須在服務端緩存)

• 獲取票據jsapi_ticket

  請求接口:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中獲取的access_token&type=jsapi
  請求方法: get,
  type: JSON,
  返回結果: jsapi_ticket (有效期7200秒，必須在服務端緩存)

• 生成時間戳（timestamp）

  // 時間戳產生函數
  var timeStamp = function () {
      return parseInt(new Date().getTime() / 1000) + '';
  };

• 簽名算法（能夠參考官方給出的demo:https://github.com/arronf2e/j...）

好比：

var calcSignature =function(ticket,nonceStr,timeStamp,url) {
            var result = {
                jsapi_ticket: ticket,
                nonceStr: nonceStr,
                timestamp: timeStamp,
                url: url,
            }
            var str = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + timeStamp + '&url=' + url;
            // 對str使用sha1簽名，獲得signature，這裏使用jsSHA模塊，需install
            shaObj = new jsSHA(str, 'TEXT');
            result.signature = shaObj.getHash('SHA-1', 'HEX');
            return result; // 返回到前端，提供接口由前端請求
        }

• 接下來就返回給前端使用(在獲取簽名的時候須要傳遞url：用於簽名的（須要四個參數來實現簽名:時間戳、ticket、前端傳遞的動態的url、nonceStr） url(動態的)給後端)]

微信分享

• 微信分享問題總結:

  • http://blog.csdn.net/u011743396/article/details/62427452

• ngork

  • https://www.zhihu.com/question/25456655

• 問題描述

  • 微信 jssdk 須要簽名，簽名的 URL 和將要分享的 URL 必需要一致纔會簽名經過
  • url必須是當前網頁的url不包含#及其後面部分(http://blog.sina.com.cn/s/blo...
• ip地址查詢:http://site.ip138.com

• python sha1簽名

  • http://blog.csdn.net/u014368609/article/details/50679818

• js獲取當前時間、時間戳

  • http://www.cnblogs.com/Man-Dream-Necessary/p/6369469.html

• Vue路由按需加載

  • http://www.jb51.net/article/1...

• 注意事項

  • 須要在配置文件webpack.base.conf.js中加入

    output:{
        pathinfo: true
    }

• Vue服務端渲染

  • http://www.cnblogs.com/wangsh...

• 後臺管理

  • https://github.com/almasaeed2...

Axios下的接口封裝

• get操做，如:

import axios from 'axios';
        /**
         * 獲取積分信息
         * @param url
         * @returns {*}
         */
        export function getJiFenDetailInfo(url) {
          return axios.get(url).then((res)=>{
            return Promise.resolve(res);
          },(err)=>{
            return Promise.reject(err);
          });
        }

• post操做,如:

import axios from 'axios';
        /**
         * 處理登陸
         * @param url
         * @param mobile
         * @param password
         * @returns {*}
         */
        export function dealLogin(url,mobile,password) {
          return axios.post(url,{
            mobile:mobile,
            password:password
          }).then((res)=>{
            return Promise.resolve(res);
          },(err)=>{
            return Promise.reject(err);
          });
        }

基於VueJs的後臺管理

• https://github.com/PanJiaChen...
• https://github.com/vue-bulma/...
• https://github.com/taylorchen...

移動端html2canvas生成圖片轉換爲File對象兼容處理

涉及點：Base64轉換爲file對象

/**
       * 將Base64轉換爲file對象
       * @param dataurl:文件的base64表示
       * @param filename:文件名
       * @return {File}:返回的file對象
       */
      dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
      },

發現ios低版本出現了兼容問題，最終發現問題出在new File()這裏。那麼就得想其餘解決辦法了，能夠先將Base64進行二進制轉換操做，最終將二進制轉換爲File對象就能夠解決。

/**
       * 將base64先轉換爲二進制對象
       * */
      dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      },
      /**
       * 最後再將二進制轉換爲file對象
       * */
      blobToFile(theBlob, fileName){
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
      },

it is done!