前端開發常用網站
一、svg相關
1、文章
-
css3:
-
/* 768 ～ 991 畫素螢幕 | iPad */
-
@media (min-width: 768px) and (max-width: 991px) { * {background: red} }
-
/* 480 ～ 767 畫素螢幕 | 普通手機 */
-
@media (min-width: 480px) and (max-width: 767px) { * {background: green} }
-
/* 480 畫素螢幕 | 小屏裝置 */
-
@media (max-width: 479px) { * {background: blue} }
二、webpack相關
#### 官方文件 https://webpack.docschina.org/api/
開發文件 https://webpack.docschina.org/concepts/
1、require.context
文件：https://www.jianshu.com/p/c894ea00dfec
-
Vue配置compression-webpack-plugin實現Gzip壓縮 https://blog.csdn.net/sinat_34849421/article/details/114313031
-
通過執行require.context函式獲取一個特定的上下文,主要用來實現自動化匯入模組,在前端工程中,如果遇到從一個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組
-
require.context函式接受三個引數
-
directory {String} -讀取檔案的路徑
-
useSubdirectories {Boolean} -是否遍歷檔案的子目錄
-
regExp {RegExp} -匹配檔案的正則
語法：require.context(directory, useSubdirectories = false, regExp = /^.//); 例子：require.context('./test', false, /.test.js$/);
上面的程式碼遍歷當前目錄下的test資料夾的所有.test.js結尾的檔案,不遍歷子目錄
大概用圖片來表示的話就是這樣子的
值得注意的是require.context函式執行後返回的是一個函式,並且這個函式有3個屬性
-
resolve {Function} -接受一個引數request,request為test資料夾下面匹配檔案的相對路徑,返回這個匹配檔案相對於整個工程的相對路徑
-
keys {Function} -返回匹配成功模組的名字組成的陣列
-
id {String} -執行環境的id,返回的是一個字串,主要用在module.hot.accept,應該是熱載入?
這三個都是作為函式的屬性(注意是作為函式的屬性,函式也是物件,有對應的屬性)
-
-
三、前端異常處理
1、文件
https://blog.csdn.net/LuckyWinty/article/details/103268296
2、vue-element-admin
文章系列：https://juejin.cn/post/6844903476661583880#heading-15
官方文件： https://panjiachen.gitee.io/vue-element-admin-site/zh/
-
文章（頁面許可權控制） https://blog.csdn.net/weixin_42618191/article/details/102610157
-
文章2（框架介紹） https://blog.csdn.net/weixin_44001965/article/details/110225388
四、SASS -----------
-
1、變數
-
1）使用 $ 去宣告一個變數，給同個變數再次賦值時後面的值會覆蓋前面的，可以在變數的末尾新增 !default給一個未通過!important宣告賦值的變數賦值，若變數已經被賦值則不會被重新賦值，！default相當於一個備胎
-
2）若變數需要鑲嵌在字串之中，那必須要寫在#{}中
-
-
2、巢狀
-
1）在巢狀的程式碼塊兒內，可以使用&引用父元素，如a:hover偽類，例如： a {
border:1px solid red;
&:hover {
color: red;
}
}
-
-
3、繼承 @extend
-
1)sass允許一個選擇器繼承另一個選擇器，
-
-
一、svg相關
1、文章
-
css3:
-
/* 768 ～ 991 畫素螢幕 | iPad */
-
@media (min-width: 768px) and (max-width: 991px) { * {background: red} }
-
/* 480 ～ 767 畫素螢幕 | 普通手機 */
-
@media (min-width: 480px) and (max-width: 767px) { * {background: green} }
-
/* 480 畫素螢幕 | 小屏裝置 */
-
@media (max-width: 479px) { * {background: blue} }
二、webpack相關
#### 官方文件 https://webpack.docschina.org/api/
開發文件 https://webpack.docschina.org/concepts/1、require.context
文件：https://www.jianshu.com/p/c894ea00dfec
-
Vue配置compression-webpack-plugin實現Gzip壓縮 https://blog.csdn.net/sinat_34849421/article/details/114313031
-
通過執行require.context函式獲取一個特定的上下文,主要用來實現自動化匯入模組,在前端工程中,如果遇到從一個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組
-
require.context函式接受三個引數
-
directory {String} -讀取檔案的路徑
-
useSubdirectories {Boolean} -是否遍歷檔案的子目錄
-
regExp {RegExp} -匹配檔案的正則
語法：require.context(directory, useSubdirectories = false, regExp = /^.//); 例子：require.context('./test', false, /.test.js$/);
上面的程式碼遍歷當前目錄下的test資料夾的所有.test.js結尾的檔案,不遍歷子目錄
大概用圖片來表示的話就是這樣子的
值得注意的是require.context函式執行後返回的是一個函式,並且這個函式有3個屬性
-
resolve {Function} -接受一個引數request,request為test資料夾下面匹配檔案的相對路徑,返回這個匹配檔案相對於整個工程的相對路徑
-
keys {Function} -返回匹配成功模組的名字組成的陣列
-
id {String} -執行環境的id,返回的是一個字串,主要用在module.hot.accept,應該是熱載入?
這三個都是作為函式的屬性(注意是作為函式的屬性,函式也是物件,有對應的屬性)
-
-
三、前端異常處理
1、文件
https://blog.csdn.net/LuckyWinty/article/details/103268296
2、vue-element-admin
文章系列：https://juejin.cn/post/6844903476661583880#heading-15
官方文件： https://panjiachen.gitee.io/vue-element-admin-site/zh/
-
文章（頁面許可權控制） https://blog.csdn.net/weixin_42618191/article/details/102610157
-
文章2（框架介紹） https://blog.csdn.net/weixin_44001965/article/details/110225388
四、SASS -----------
-
1、變數
-
1）使用 $ 去宣告一個變數，給同個變數再次賦值時後面的值會覆蓋前面的，可以在變數的末尾新增 !default給一個未通過!important宣告賦值的變數賦值，若變數已經被賦值則不會被重新賦值，！default相當於一個備胎
-
2）若變數需要鑲嵌在字串之中，那必須要寫在#{}中
-
-
2、巢狀
-
1）在巢狀的程式碼塊兒內，可以使用&引用父元素，如a:hover偽類，例如： a {
border:1px solid red;
&:hover {
color: red;
}
}
-
-
3、繼承 @extend
-
1)sass允許一個選擇器繼承另一個選擇器，
-
五、位元組小程式
1、開發文件： https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/open-interface/e-commerce/open-ec-im/
通過正則過濾小數點後兩位
// if(type==1){
// this.infoData.electricityFees = (e.match(/^\d*(.?\d{0,2})/g)[0]) || null
// } else if(type==2){
// this.infoData.siteFee = (e.match(/^\d*(.?\d{0,2})/g)[0]) || null
// }
六、高德地圖
1、開發文件：https://developer.amap.com/api/amap-ui/reference-amap-ui/other/poipicker
高德賬號：15293175352
2、jsAPI：https://lbs.amap.com/demo/javascript-api密碼： hblcy19960421
使用者名稱： amap_15293175352AfanNMVkN
2、el-amap: https://elemefe.github.io/vue-amap/#/zh-cn/base/amap
小程式id： wx0e3e69ed3649fc59
七、three.js
八、經緯度轉換
九、mockJS
十 、ngnix相關
十一、Vue-Cli3.0
-
文章（打包時如何去掉console列印資訊） https://www.jianshu.com/p/c360a22f122d
十二、svg圖示下載
十三、GIT相關
-
git merge --abort取消合併
十四、部落格
+ https://www.cnblogs.com/yangsg/p/13131956.html
-
-