前端开发常用网站
一、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
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）