大家好,我是梅巴哥er
。本篇将作为永久记录的文档,用来记录在职业生涯中的所有学习资料和网站。随时更新学习资料和网站。
本篇目录:
- 百度
- W3CSchool
- 菜鸟教程
- MDN官网
- node
- bilibili
- 前端三大框架之一 react
- 各种技术博客官网
- 一个刷题网站 牛客
- 力扣官网
- Typora官网
- 安装mongoDB数据库及文档
- 下载nvm控制node版本
- Nginx官网下载
- window nginx 基础命令
- 安装git
- ps切图
- 推荐书籍
- VS Code插件和配置
- Gitlab 添加 SSHkey
- 预览svga格式的动画
- 菜鸟教程工具
- 测试工具Postman
- 大佬分享的学习路线图
- API商城,里面有各种免费 / 付费接口
- 聚合数据的接口,也有不少免费的
- layui , 一个ui库
- express , koa 后端框架
- mongodb compass
- antd
- yarn的安装和使用
- redux官方文档
- 各种数据库介绍
- 微信开放文档
- npm包
- 图片转换为favicon.ico
- 画图板
- 日期格式化momentjs
- 搜索js包对应的CDN链接和min.js包
- react版本的markdown编辑器,可编辑可渲染可预览
- 在线调整贝塞尔动画曲线的网址
- npm和yarn的最新镜像
- 查看npm包的信息
百度
有问题,先百度。学会自己找方案。
W3CSchool
前端入门,查标签,查css,查js等,可以当入门教程,也可以当工具书。
https://www.w3school.com.cn/
菜鸟教程
和w3cschool差不多,
https://www.runoob.com/
MDN官网
前端神器,你想知道的,他都有。
https://developer.mozilla.org/zh-CN/
https://developer.mozilla.org/zh-CN/docs/Web
node
- node 文档:
http://nodejs.cn/api/
- node下载:
http://nodejs.cn/download/
- 建议装个
nvm
,用来管理node版本
bilibili
bilibili大学,众所周知。
江湖人称b站,或者小破站。
前端三大框架之一 react
- 一个构建UI界面的库,
https://reactjs.bootcss.com/
。
各种技术博客官网
- csdn :
https://blog.csdn.net/tuzi007a
- 博客园
https://www.cnblogs.com/
(经常崩溃…) - 掘金:
https://juejin.cn/
- 简书:
https://www.jianshu.com
- github
- gitee
一个刷题网站 牛客
https://www.nowcoder.com/
力扣官网
一个刷算法题的网站
https://leetcode-cn.com/
Typora官网
一款很棒的markdown
文档编辑器。
https://www.typora.io/#
了解更多用法,可以看这篇:
https://blog.csdn.net/tuzi007a/article/details/122730286
安装mongoDB数据库及文档
- 去下载:
https://www.mongodb.com/try/download/community
- 用于服务器的各个版本的mongodb :
http://dl.mongodb.org/dl/win32/x86_64
- 安装和配置:
https://www.cnblogs.com/DJRemix/p/12910066.html
- 往下拉,有连接教程
https://www.mongodb.com/zh-cn/what-is-mongodb
。 - mongodb中文文档:
https://docs.mongoing.com/
- 英文文档:
https://docs.mongodb.com/manual/
。注意,右边有个选择语言的,常用的有shell , compass , nodejs 。 shell就是powershell 控制台 , compass就是mongodb官方的可视化工具, node.js就是node代码。 语言一定要选择正确。
- mongodb的API文档:
https://mongodb.github.io/node-mongodb-native/
。 自己用哪个版本就点进去那个版本查看即可。 进去之后记得选择好自己用的语言。 比如我用的node,我就选nodeJs 。 文档就会给你按照node语言来提示api用法。(所有的资料都在这个文档里,可以直接到这个文档里查看)
下载nvm控制node版本
完整版:
https://blog.csdn.net/tuzi007a/article/details/123722455
Nginx官网下载
不管会不会配置,看懂是必修课。
http://nginx.org/en/download.html
打开链接后直接下载的
安装好后,打开git-bash.exe
,输入命令行git –version
查看安装的git版本。正常输出版本号,表示安装成功。
window nginx 基础命令
- 简单的命令行
https://www.cnblogs.com/tengrl/p/10642046.html
- 关掉nginx的更粗暴的办法是,直接任务管理器里结束任务
安装git
https://blog.csdn.net/eno_yang/article/details/114782695
- 这篇讲的很详细,不知道如何安装git,可以看看。看完记得给这位老哥点个赞。
ps切图
-
首先,打开PS软件,打开一张待切片的图片,或者直接把图片拉进ps操作台
-
操作台最上面的“视图”选项里,点进去,先把标尺勾上。右边工具栏最下面,有3个点的图标,右击一下,选编辑工具栏,可以看到对应的工具。切片工具是隐藏的,要右击图标快捷键是C的图标,把切片工具找出来。同样还有切片选择工具,都在同一个地方,快捷键都是C。
-
然后,放大图片,尽量多放大点,方便操作。接着开始拉参考线,沿着要切图的边。
-
拉好线后,右击快捷键为C的图标,选切片工具。把要切的图片选出来。
-
切好之后,点操作台最上面的“基于参考线的切片”,一定要记得点这个选项啊,不然最后导出肯定出问题。
-
然后,右击快捷键为C的图标,选出切片选择工具,按住shift键,把要选择的切片,都点一下,选中的切片有明显标记的。
-
选好之后,右击一个被选中的切片,选“组合切片”,这样就把切片组合到一起了。
-
到操作台最左上角,点“文件”,再选“导出”,再选“存储为web所用格式”。
-
这时候会有个弹窗,右上角可以选要导出的图片的格式,右下角点“存储”。
-
这时候又一个弹窗,在最下面,选择“选中的切片”。找个文件夹,点保存,就完事儿了。Over。
-
切片的操作步骤,大致就是这样了,我觉得写的是极为详细了,如果还有不明白的地方,可以去百度。 后续如果还需要精细化处理,我还会继续补充。
-
更新均匀切片的一种更快的方法
-
直接找出“切片选择工具”
-
右击要均匀切片的图片,选择“划分切片”选项。根据自己的需求划分。
-
划分好之后点确定,然后按照上面的步骤进行导出即可。
-
此方法更快捷好用。
-
update 2021-5-20
推荐书籍
js高级程序设计(第4版)
,俗称红宝书
,又称高程4
js权威指南(第7版)
,俗称犀牛书
VS Code插件和配置
-
Auto Close Tag
:自动闭合标签,括号等 -
Auto Rename Tag
:当修改开始或闭合标签时,会自动修改另一半的闭合或开始标签。 -
Bracket Pair Colorizer
:代码中的括号成对高亮显示。当代码量多了之后,特别有用,不容易弄混 -
Chinese (Simplified) Language Pack for Visual Studio Code
:启用中文简体版本的vscode 。*注:
如果你英语阅读能力超强或者习惯了英文版vscode,那就忽略这条。 -
Code Runner
:安装之后,鼠标右键点击代码区域,就可以直接运行代码了。不用单独去文件夹里打开cmd了。 -
Debugger for Chrome
:字面意义的debug -
filesize
:添加头header comment -
indent-rainbow
:很清晰的识别你的代码块,比较有帮助 -
IntelliSense for CSS class names in HTML
:类名补全 -
npm Intellisense
:在写后台代码用到require引入包时,会给提示包名 -
open in browser
:写好页面后,右键点击代码区,就可以选择在哪个浏览器里打开页面了。不需要再去双击.html文件了。 -
Path Intellisense
:路径提示 -
Prettier - Code formatter
:这个插件会让你写出的代码特别美观,特别靓,他的安装量已经突破1220万,真可怕。看来程序员也是爱美之人呀,哈哈 -
Rainbow Brackets
:括号颜色变好看 -
文件--首选项--设置
:Editor: Tab Size
这里把数字4
改成2
,表示代码缩进是2个空格。这是标准,改就对了。 -
文件--首选项--设置
:Accept Suggestion On Commit Character
这个选项的√给去掉,不要勾选。Accept Suggestion On Enter
这个选项设置成off。目的是防止点击enter
、(
、,
、;
等符号的时候,自动补全代码,出现重大错误或影响代码速度和质量。调整后,点击下面的“去settings.json里编辑
”,看下这两句代码"editor.acceptSuggestionOnEnter": "off", "editor.acceptSuggestionOnCommitCharacter": false
是否是这样设置的,如果不是,就补充进去。如果是,就对了。 -
文件--首选项--设置
:Editor:Word Wrap
选项,把off
改选成on
,就可以让代码自动折行。 -
filesize
插件。可以显示当前文件大小,很实用. -
react的jsx里自动标签补全设置:
https://blog.csdn.net/shaleilei/article/details/82984228
-
安装正则插件库
any-rule
。使用方法:在你要用的页面右键 选择正则大全
,然后搜索需要的正则即可。 -
在Vue的template模板中自动补全html标签的配置:
https://blog.csdn.net/zhangyuying_777/article/details/114439128
-
baidu-search
插件
在vscode中遇到需要百度的问题,直接在vscode中右击选择baidu search
即可打开百度搜索关键字词。 -
live server
插件
可以创建一个服务器,用来打开需要获取网络资源的页面。
配置:
https://blog.csdn.net/zhouwei_doris/article/details/80604604
使用方法:
比如我配置的port是8888,
那么我就在页面打开链接http://localhost:8888/
即可获取到当前服务器内的资源。
打开服务后,在vscode右下角可以看到端口号了:
此时更改项目中的代码,保存的时候,页面会刷新。实现了热更新。
非常方便学习。
Gitlab 添加 SSHkey
https://www.cnblogs.com/hafiz/p/8146324.html
- 所在公司是用gitlab管理项目的,需要添加SSHkey
- 如果你刚好也入职了用gitlab管理工具的公司,且不懂怎么添加,看这篇文章就够用了。
预览svga格式的动画
- 有些公司里,比如直播平台,电商直播平台等,会经常用到svga格式的动画。
- 打开该网站,把svga文件放上去,就可以实现预览效果。
- 如果想学习应用svga,这里是svga的github官网,可以点进去查看和学习。
http://svga.io/svga-preview.html
update 2021-5-13
菜鸟教程工具
里面有各种前端、后端、编译等工具。如
前端三剑客压缩/解压工具,
json在线解析和格式化工具,
正则在线检测工具,
IP地址查询,
取色器,
在线字数统计工具,等等。
https://c.runoob.com/
update 2021-5-19
测试工具Postman
- 一个测试接口的工具
- 该标题指向postman下载地址,直接点击跳转到官网下载页面
- 下载地址:
https://www.postman.com/downloads/
update 2021-5-20
大佬分享的学习路线图
API商城,里面有各种免费 / 付费接口
https://apis.baidu.com/
update 2021-6-24
聚合数据的接口,也有不少免费的
https://www.juhe.cn/docs?bd_vid=12043647083935390897
update 2021-7-2
layui , 一个ui库
https://www.layui.com/doc/
官网倒闭了,可以用,但是不会更新了…
express , koa 后端框架
- 原生http算是第一代后端框架, 监听端口,写入路由,导出接口等
- express算是第二代,在http基础上做了封装。
- koa1算是第三代,在对原生js的支持上做了很大改进。同时也变得更轻量级。
- koa2算是第四代, 在koa1基础上,做了更多提升。
- koa2官方文档:
https://koa.bootcss.com/
- koa2中文文档:
https://www.itying.com/koa/article-index-id-90.html
建议看中文文档。比较清晰有条理。
mongodb compass
一个操作mongodb数据库的可视化工具,官方自带的
https://www.mongodb.com/try/download/compass
antd
https://ant.design/docs/react/introduce-cn
yarn的安装和使用
npm install 有时候会卡住不动,装了镜像也一样会有这种情况。但是yarn很顺利
https://www.jianshu.com/p/021df9efdda5
redux官方文档
https://www.cntofu.com/book/4/readme.html
http://cn.redux.js.org/introduction/getting-started
- 这俩都是
各种数据库介绍
http://c.biancheng.net/view/3856.html
微信开放文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4
npm包
用到的所有npm插件,都在这里
npmjs.com
图片转换为favicon.ico
https://www.bitbug.net/
画图板
https://excalidraw.com/
日期格式化momentjs
官网:http://momentjs.cn/
搜索js包对应的CDN链接和min.js包
https://cdnjs.com/libraries
搜索到对应的cdn链接后,在网页中打开,即可拿到对应的min.js包了。
react版本的markdown编辑器,可编辑可渲染可预览
https://uiwjs.github.io/react-md-editor/
在线调整贝塞尔动画曲线的网址
https://cubic-bezier.com/
npm和yarn的最新镜像
npm镜像
# 查询当前镜像
npm config get registry
# npm原始镜像
npm config set registry https://registry.npmjs.org
# npm最新淘宝镜像
npm config set registry https://registry.npmmirror.com
yarn镜像
# yarn原始镜像
yarn config set registry https://registry.yarnpkg.com/
# yarn淘宝镜像
yarn config set registry https://registry.npmmirror.com
查看npm包的信息
# 查看某个npm包的版本信息
npm view 包名
该博客永久更新,最新更新日期:2023/05/25