原创 webpack實戰——分離樣式文件

前言 這是webpack實戰系列筆記的第7篇記錄——分離樣式,前幾篇記錄如下: 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 預處理器【上篇】 預處理器——常用loader【下篇】 在之前篇章裏面主要是對js的打包應用和

原创 webpack實戰——預處理器(loader)【下篇】

寫在前面 這是webpack實戰系列筆記的第6篇記錄,前幾篇記錄如下: 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 預處理器【上篇】 在上一篇中根據一切皆模塊的思想,學習瞭解了loader:概述、引入、配置及使用。本篇

原创 webpack實戰——預處理器(loader)【上篇】

寫在前面 這是webpack實戰系列筆記的第5篇記錄,前幾篇記錄如下: 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 上一篇簡單描述了一切皆模塊的思想,學以致用,來實踐下~ 1. 關於 loader 每個loader本質

原创 webpack實戰——一切皆模塊

寫在前面 這是webpack實戰系列筆記的第4篇記錄,簡單描述一個思想:模塊化思想——一切皆模塊。本系列前幾篇: 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 一個web工程通常會包含一系列的靜態資源,並且這些資源一般會

原创 webpack實戰——資源輸入與輸出

寫在前面 這是webpack實戰系列筆記的第三篇記錄:資源輸入與輸出。前兩篇: 打包第一個應用 模塊化與模塊打包 1. 資源處理流程 前兩篇的博客中提及,webpack主要作用是對 解決模塊之間的依賴,把各個模塊按照特定的規則和順序組織

原创 webpack實戰——模塊打包

寫在前面 這是webpack實戰系列的第二篇:模塊和模塊打包。上一篇:webpack實戰——打包第一個應用 記錄了webpack的一些基礎內容與一個簡單地小例子,開啓了webpack的實戰之路,這一篇記錄一下關於模塊和模塊打包。 模塊 先看

原创 webpack實戰——打包第一個應用

寫在前面 最近學習了一些關於webpack的知識,在此做一些紀錄。 作爲前端開發者,我們以前在瀏覽器中運行 JavaScript ,會引用一些腳本來存放每個功能;此解決方案很難擴展,因爲加載太多腳本會導致網絡瓶頸;亦或使用一個包含所有項目代

原创 常用驗證碼之滑動驗證碼|圖形驗證碼

寫在前面 這裏是常用驗證碼的第三篇——滑動/圖形驗證碼。 在前兩篇已經實現了隨機驗證碼和算術驗證碼,感興趣的可以去看一下~ 常用驗證碼之字符串驗證碼 常用驗證碼之算術驗證碼 除了這兩種常用的驗證碼之外,現在最經常用到的還有幾種,比如滑動

原创 常用驗證碼之算術驗證碼

寫在前面 這裏是常用驗證碼的第二篇——算術驗證碼。 在上一篇已經實現了常用驗證碼之字符串驗證碼,感興趣的可以去看一下~ 接下來要實現的就是字符串驗證碼了,先看下效果: 本篇記錄純前端寫算術驗證碼。 實現:算術驗證碼 一般來講,字符串、算數

原创 常用驗證碼之字符串驗證碼

寫在前面 驗證碼 這個玩意,無論是開發者還是用戶都十分熟悉: 註冊? 請輸入驗證碼... 登錄? 請輸入驗證碼... 修改密碼? 請輸入驗證碼... 刪除? 請輸入驗證碼... …… 總之,各類敏感操作,請輸入驗證碼! 這麼多場景中用

原创 axios進階之路——基礎篇

本課題包含三篇:基礎篇;攔截器篇;封裝篇。本篇爲基礎篇,主題爲axios基礎介紹及安裝使用。 一、 關於Axios 1. Axios是什麼 Axios是一個基於 promise 的 HTTP 庫 可以用於瀏覽器和 node.js 類似於

原创 MockJs使用分享

前言   在前後端分離的時代,項目開發測試中我們常常因爲前後端完成模塊功能時間不一致而導致開發效率的降低,尤其是需要接口對接之時。鑑於此,MockJs應時而生,對此痛點予以重擊。  本篇案例則屬於一個簡單的示範案例,在脫離後端(在沒與後端聯

原创 CSS佈局之道——內凹圓角

一、 效果圖 先來看一下效果圖: 二、 實現 1. 場景 看上圖,此類場景應該很是常用吧,比如賬單、卡片、列表等。 2. 實現思路 看到效果圖,能想到的實現方法則是 planA:border-radius直接搞起來 planB:定位

原创 axios進階之路——攔截器篇

本課題包含三篇:基礎篇;攔截器篇;封裝篇。本篇爲攔截器篇,主題爲axios的請求攔截器、響應攔截器配置。 一、 攔截器介紹 一般在使用axios時,會用到攔截器的功能,一般分爲兩種:請求攔截器、響應攔截器。 請求攔截器 在請求發送前

原创 vscode/webstorm自定義vue模板

導語 在進行vue項目時,我們需要對編譯器進一步配置來支持vue文件以及相關模板語法的高亮顯示等。本文列出關於webstorm和vscode兩種常用編譯器的模板語法配置。 webstorm 1. 打開設置 打開設置: File => Se