分享工具帖
分享工具帖
匡思进学三件套时, .学长分享的好用工具, 当时有许多看不懂(现在也是).
避免以后遗忘, 把它搬到这里来
有些东西这里不方便分享, 留个坐标, 只有我自己能看
文件夹位置 "D:\front\前端学习.md"
分享
❗ 注：还是按自己学习主线走，大部分只是闲下来拿来玩玩不要太投入了哈哈，这里仅作一个分享
其实很多我也没咋用过，学会了浇浇我♿
更多的平时可以多逛逛 掘金社区 或者 b站
你可能会需要的
谷歌邮箱
这个注册比较看运气，而且需梯子，不过能有一个的话最好了
2025 Gmail注册教程｜跳过+86手机号验证，0失败保姆级注册方法！适用国内用户_哔哩哔哩_bilibili
沉浸式翻译
一键自动翻译网页，好像需要有谷歌账号
沉浸式翻译 - 双语对照网页翻译插件 | PDF翻译 | 视频字幕翻译
常用技能学习
learn git branching
用来学习git基础操作（我也好多不会额啊啊啊）
lodash
现代JS工具函数库，网上很多项目都会接触这个库的函数，在跟着做项目时如果有引用的可以来这里找
Lodash 简介 | Lodash中文文档 | Lodash中文网
一堆UI组件库
Tailwind CSS——🔸CSS库
Ant Design——💠双兼容
Arco Design——💠双兼容
React Bits——☢React专属
Magic UI——☢React专属
Element Plus——☢Vue专属 且必然会用到
VueUse——☢Vue专属
Radix Vue——☢Vue专属
Inspira-ui——☢Vue专属 且提供源码(可非安装直用)
Anime.js——☢Vue专属
一堆前端工具
Vite
前端项目构建工具，优点巨多，主要具有超快的启项目能力
Echarts
前端图表库，可视化方向必学
Storybook
如果你想写一个自己的组件库，用Storybook来测试组件是个很好的选择
Storybook: Frontend workshop for UI development
Rollup
🔞框架之后——构建打包你的项目代码，压缩文件体积，一般用来优化项目
简介 | rollup.js 中文文档 | rollup.js中文网
postcss
可以帮你转译CSS为合适的形式（比如自动捕获浏览器版本并为属性名自动加前缀），常用于浏览器兼容性优化
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网
BuildAdmin
☢Vue专属——一键创建后台管理系统
Vitest
☢Vue专属——支持编写和测试vue单文件组件的单元测试，特点是非常快
Vue I18n
☢Vue专属——将国际化引入应用，具体可以看看这个例子VueI18n Get Started - StackBlitz
复制粘贴的神
codepen
动画库
uiverse
动画库
Swiper
轮播图API
官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
教程：教大家如何用swiper插件三分钟快速做轮播图_哔哩哔哩_bilibili
工具型技术
Canvas
全新的渲染模式，通过在页面绘制来实现高级动画
GSAP
高级交互动画开发
教程：使用GSAP轻松给页面添加动画效果｜GSAP3 入门｜官方英文教程阅读｜GreenSock GSAP_哔哩哔哩_bilibili
打造极致体验：HTML+CSS+JS+GSAP，构建惊艳着陆页动画_哔哩哔哩_bilibilihttps://codepen.io/trending)
scrollmagic
鼠标滚轴交互
terser
🔞后面等到学完框架有用，用来项目里压缩CSS代码
字体图标库
字体
可插入成为电脑系统字体
图标
17037 个Ico图标图标，免费复制或下载 PNG、SVG 格式 - Yesicon
Free Icons PNG, ICO, ICNS and SVG
logos
可以放github主页README
鼠标
这个替换的话可以去网上找一下教程
鼠标指针 - 光标 - 电脑鼠标指针下载 - 致美化 - 漫锋网
博客建设
❗ 注：玩这个不要太上头了哈🤡，一定要保证自己学习进度
写在这里就是因为感觉大家目前的时间比较充裕，可以探索一些新奇的东西
搭建
如果你想要拥有自己的博客，大体分为两种
- 第三方网站建设
CSDN
掘金
博客园
- 自主使用框架搭建
目前主流的框架有
Halo（动态数据，需要服务器支持）
【性能比较好，有可视化后台设置，但大部分数据存储在服务器，很多样式无法自定义，服务器部署上手难度大】
我第一版博客是去年全程跟着【建站教程】如何安装Halo并搭建炫酷的博客_哔哩哔哩_bilibili 这个视频走的，一晚上就搭好了，但今天视频里的很多网站工具啥的都挂了，可能需要绕很多路，感兴趣不妨找找其他的教程。
Hexo（静态数据，文件存储在本地，可以部署在Github而避开服务器）【推荐】
【拥有完整项目文件，所有插件可控，样式可控，但操作难度较大，处理不当的话可能会问题频繁，无可视化后台】
考虑到大家当前的进度，要等真正开始做项目的话这个上手起来可能自行就会了，所以大家还是加油学🐱🏍，我当前的博客方案就是 Hexo + 安知鱼主题 + 自行改造，如果要建设比较符合预期的博客还是挺费时间的，配置的东西需要改很多。
wordpress
没有了解过，但使用者众多，刁总在用
Vitepress（静态数据，部署简单，同样可以部署在Github）
果队在用，我的组件库也是用Vitepress搭的，整体上手可能比前几个都简单点
还有很多可以自行去搜索，因为我剩下的都没接触过哈哈哈
部署
如果使用第三方网站建设则可跳过，如果是自行搭建，这里也分为两种部署模式
服务器部署
- 这个要租服务器，有兴趣可以去 腾讯云(首年优惠力度大)、雨云(一直在用)
- 剩下的我忘了，一年前跟着视频做的，只记得还是有点麻烦
Github Page
- 这个是部署在github仓库里的，而且一个账号只有一个，有仓库命名规范
- 考虑到没有服务器支持，如果你的博客内部有大量的图片，需要租图床来存储，我当前在用去不图床 - 杜老师说旗下图片外链平台，便宜好用，但是每次开图床比较慢hh
域名
如果你想有一个好听的网站名字，可以去租个域名套在自己的网站上
这里推荐雨云，租个一年的.cn顶级域名才20+
不同的方式部署博客挂域名的方式也不同，详情可以找找教程或者来问我
其他
Google Map
最好的地图网站，没有之一
Pexels
壁纸and视频都有，我博客的背景都是在这找的
ioDraw
用来画流程图一级棒，而且可以绑github
Template0
免费获取网站模板，虽然我还没用过这个，不过看上去很不错
Template0 - Explore and Share Free Templates
一些比较酷的东西
不妨研究研究这些是怎么做的😁说不定你就看上什么技术了hhh
Honorable Mention - Awwwards——这是年度网站评选
Patrick Heng - Creative Developer Portfolio
PLABS.ID | Digital Technology Innovation Company
