前端常用工具
方跃明 2021-12-22
工欲善其事,必先利其器。
Development
开发辅助工具。
工具 | 说明 |
---|---|
Vite server.proxy | 前端开发环境跨域CORS问题终极神器 |
http-server | 交付部署前自测一下可以增进感情 |
JSON Sever | RESTful风格API模拟工具 |
nvm-windows | Node.js版本管理工具 |
WSL | 近乎真实环境体验的Linux |
VSCode
插件 | 说明 |
---|---|
Iosevka | 编程字体 |
Todo Tree | 好记性不如烂笔头 |
EditorConfig | 你知道吗?CRLF也是漏洞 |
ESLint | 不以规矩,不成方圆 |
Prettier | 前端美妆包 |
DotENV | .env语法高亮 |
Volar | Vue.js开发辅助神器 |
Git Graph | git辅助神器 |
REST Client | 后端API接口自测工具 |
EDGE
Microsoft EDGE 浏览器插件。
插件 | 说明 |
---|---|
Vue.js devtools | Vue.js开发工具 |
JSON Formatter | JSON格式化工具 |
Allow CORS | 跨域CORS临时解决工具 |
Boomerang | RESTful风格API请求工具 |
Wappalyzer | 他山之石可以攻玉 |
Chrome
Google Chrome 浏览器插件。
科学上网
Google Chrome 应用商店和账号同步需要科学上网。对于Google轻度依赖者更推荐使用 Microsoft EDGE。
插件 | 说明 |
---|---|
Chrome版Vue.js devtools | Vue.js开发工具 |
JSON Viewer | JSON格式化工具 |
Chrome版Allow CORS | 跨域CORS临时解决工具 |
Yet Another REST Client | RESTful风格API请求工具 |
Chrome版Wappalyzer | 他山之石可以攻玉 |
基础
技术栈 | 说明 | 链接 |
---|---|---|
Koa | Node.js后端框架 | https://koajs.com |
Egg.js | Node.js后端框架 | https://eggjs.org/zh-cn/index.html |
React | JavaScript前端库 | https://zh-hans.reactjs.org |
Nex.js | React通用应用框架 | https://nextjs.org |
Vue.js | 渐进式JavaScript框架 | https://cn.vuejs.org |
Nuxt.js | Vue.js通用应用框架 | https://zh.nuxtjs.org |
Docker | Linux容器 | https://www.docker.com |
混合应用
名称 | 说明 | 链接 |
---|---|---|
uniapp | Vue H5、App、小程序 | https://uniapp.dcloud.io |
ionic | H5、App | https://ionicframework.com |
Taro | React H5、App、小程序 | https://taro.aotu.io |
WEEX | Vue H5、App | https://weex.apache.org/cn |
前端
名称 | 说明 | 链接 |
---|---|---|
http-server | HTTP服务器 | https://github.com/http-party/http-server |
JSON Server | JSON数据库 | https://github.com/typicode/json-server |
Husky | Git Hooks | https://github.com/typicode/husky |
jsonplaceholder | 在线模拟数据 | https://jsonplaceholder.typicode.com |
placeholder | 在线模拟图片 | https://placeholder.com |
VuePress | 文档编制 | https://vuepress.vuejs.org/zh |
Electron | 桌面应用 | https://electronjs.org |
Ant Design Pro | 后台管理 | https://github.com/ant-design/ant-design-pro |
AntV | 高级图表 | https://antv.vision/zh |
Chart.js | 简单图表 | https://www.chartjs.org |
Socket.io | Web Socket | https://socket.io |
Geolib | 地理坐标 | https://github.com/manuelbieh/geolib |
AreaCity | 行政区域 | https://github.com/xiangyuecn/AreaCity-JsSpider-StatsGov |
TOAST UI Editor | 所见即所得编辑器 | https://github.com/nhn/tui.editor |
Hotkeys | 热键 | https://github.com/jaywcjlove/hotkeys |
clipboard.js | 剪贴板 | https://github.com/zenorocha/clipboard.js |
Cropper.js | 图片剪裁 | https://github.com/fengyuanchen/cropperjs |
vue-cropper | Vue图片剪裁 | https://github.com/xyxiao001/vue-cropper |
Vue.Draggable | Vue拖拽 | https://github.com/SortableJS/Vue.Draggable |
后端
名称 | 说明 | 链接 |
---|---|---|
forever | Node.js服务 | https://github.com/foreversd/forever |
semver | 版本管理 | https://semver.org |
nodemon | 开发热更新 | https://github.com/remy/nodemon |
globby | 文件加载 | https://github.com/sindresorhus/globby |
node-cron | 定时任务 | https://github.com/kelektiv/node-cron |
MinIO | 对象存储 | https://github.com/minio/minio |
Nodemailer | 邮件发送 | https://nodemailer.com |
Sequelize | ORM | https://github.com/sequelize/sequelize |
oauth2-server | 授权 | https://github.com/oauthjs/node-oauth2-server |
node-casbin | 访问控制 | https://github.com/casbin/node-casbin |
node-cache-manager | 缓存 | https://github.com/BryanDonovan/node-cache-manager |
log4js | 日志 | https://github.com/log4js-node/log4js-node |
运维
名称 | 说明 | 链接 |
---|---|---|
IGG | 谷歌学术助手 | https://iguge.app |
ghelper | 谷歌上网助手 | https://googlehelper.net |
Iosevka | 编程字体 | https://github.com/be5invis/Iosevka |
frp | 内网穿透 | https://github.com/fatedier/frp |
WebVirtCloud | QEMU/KVM虚拟机 | https://github.com/retspen/webvirtcloud |
Matomo | 访问统计分析 | https://github.com/matomo-org/matomo |
NodeSource | Node.js安装 | https://github.com/nodesource/distributions |
ScreenToGif | 屏幕捕获 | https://www.screentogif.com |
NSSM | Windows服务 | https://nssm.cc |
pm2 | 后台运行Node.js | https://pm2.keymetrics.io |
forever | 后台运行Node.js | https://github.com/foreverjs/forever |
持续整理中……