原创 Vue項目基於Gitlab+Jenkins自動化部署採坑總結

採用gitlab+Jenkins來實現自動化部署的文章和教程網上有很多,可是這些教程只是寫了如何進行配置和部署可是在這個過程中遇到的坑並沒有給出解決方案以至於自己在按照這些文章教程進行實踐時碰到了一些棘手問題而且是不好找問題的那種。 經過

原创 基於vue-cli3創建的項目引入PWA(一)

在vue-cli創建的項目中要引入pwa可以通過安裝和配置webapck插件進行集成,但是通過vue-cli3創建的項目是不推薦這種方式的。在vue-cli3的插件的中存在一個pwa插件,可以通過這個插件來引入PWA。 零、配置manif

原创 基於vue-cli3創建的項目引入PWA(二)

在上篇文章中寫了安裝PWA插件、配置PWA插件的步驟以及注意點,這篇文章寫一下service worker的實現——sw.js。 一、安裝install service worker在註冊完成後會進入到安裝階段。在安裝階段service

原创 windows中定時同步文件

windows系統中同步兩個文件夾的文件或者兩臺電腦的文件可以考慮使用Microsoft同步工具SyncToy,配合Windows自帶的計劃任務來完成。 一、安裝SyncToy SyncToy下載地址:http://www.microso

原创 Vue-cli3執行serve和build命令時nodejs 內存溢出問題

前端項目越來越大,最近在執行serve和build命令時出現了 CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 錯誤。這是因爲在webapck打

原创 Vue.js——監聽組件的生命週期

有父組件Parent和子組件Child,如果父組件監聽到子組件掛載mounted就做一些邏輯處理,常規的寫法可能如下: // Parent.vue <Child @mounted="doSomething"/> // Child.vu

原创 動態設置ECharts座標軸分割間隔

ECharts很強大,功能很全,但是配置項太多了,查配置項手冊進行配置就花費了很多時間。由於統計數據的大小始終在變化因此座標軸的分割間隔如果寫死了就會隨着時間的推移變得不太合適,需要動態的根據統計數據來做一個合理的分割間隔設置。 在官方配

原创 聊一聊 cookie

我們看到的 cookie 我自己創建了一個網站,網址爲http://ppsc.sankuai.com。在這個網頁中我設置了幾個cookie:JSSESSIONID,PA_VTIME,skmtutc,test。 在 chrome 瀏覽器中打

原创 反編譯小程序實踐

爲了瞭解小程序代碼壓縮後是什麼樣子,於是進行了一次反編譯。 一、準備  1.node.js運行環境          如果沒有安裝node.js,需要先安裝node.js   2.反編譯腳本 一般都是採用GitHub上qwerty4721

原创 Vue項目中在import中添加webpack註釋導致Vue的現代模式不可用

Vue中的現代模式編譯是一種很好的模式既能在現代瀏覽器上獲得性能與體積提升又能在舊版瀏覽器中得到支持。但是在現代模式下硬編碼的文件名是不被支持的,當出現硬編碼的文件名時採用現代模式編譯會報錯。 錯誤示例: 這個種看着各個都不相同的錯誤都

原创 js的函數的防抖和節流

一、防抖 定義:觸發高頻事件後n秒內函數只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。 思路:每次觸發事件時都取消之前的延時調用方法 實現: function debounce(fn) { let timeou

原创 一次安全可靠的通信——HTTPS原理

爲什麼HTTPS協議就比HTTP安全呢?一次安全可靠的通信應該包含什麼東西呢,這篇文章我會嘗試講清楚這些細節。 Alice與Bob的通信 我們以Alice與Bob一次通信來貫穿全文,一開始他們都是用明文的形式在網絡傳輸通信內容。 嗅探以

原创 微信小程序實現頁面浮動導航

這篇文章主要爲大家詳細介紹了微信小程序實現頁面浮動導航,具有一定的參考價值,感興趣的小夥伴們可以參考一下 一、前言 做複雜的小程序就與web頁面的區別原來越小了,一些web頁面的功能會被要求添加到微信小程序頁面中。

原创 JavaScript中的數組拷貝

  拷貝分爲淺拷貝和深拷貝,在JavaScript中能夠實現這兩種拷貝的方式也是多種多樣。以下是一維數組實現深拷貝和淺拷貝的各種方式。 一、淺拷貝 1、賦值 賦值是最直接的一種淺拷貝。 let arr3 = [1,2,3]

原创 JavaScript:事件處理

function EventUtil() { /** * 添加(註冊)事件 * @param {element object} element 元素/標籤名 * @param {string} eventType