ChatGPT-静态资源本地在线切换
静态资源本地在线切换You:web 开发如何设置,引用的静态资源 可以在 build 的时候选择使用本地的或者在线的 ChatGPT:在 Web 开发中,你可以通过 环境变量 或 构建配置 来控制静态资源(如 JS、CSS、图片)是在 build 时使用本地文件,还是引用 CDN(在线资源)。这是一个常见的需求,特别是为了适应开发环境和生产环境的不同需求。 💡 常见场景 开发环境(dev):使用本地静态资源,方便调试。 生产环境(prod):使用 CDN,减少服务器压力,提高加载速度。 ✅ 通用做法一:用环境变量区分资源路径 设置环境变量 例如在 .env 文件中: 12345# .env.developmentVITE_ASSET_SOURCE=local# .env.productionVITE_ASSET_SOURCE=cdn 代码中使用条件判断 假设你使用的是 Vite(React / Vue / Svelte 等都可以适配): 1234const useCDN = import.meta.env.VITE_ASSET_SOURCE...
iconLib
ICON Lib 静态·未分类 🥇 1. Phosphor Icons 🥈 2. Material Symbols / Material Icons 🥉 3. Iconoir 🧢 4. Lucide 🎯 5. Tabler Icons 总结比较表: 内置动画的图标库 boxicons Lordicon Remix Icon + CSS 动画 Phosphor Icons 4. IconScout Animated Icons 设计图标库 🧩 补充:如何给普通图标加动画? 🎯 总结推荐: FontAwesome Pro 使用许可- You:- ChatGPT: ✅ 你购买一份 Font Awesome Pro 许可后可以: 🚫 不可以的情况: 🧩 举个例子: 例 1: 例 2: 📝 总结一句话: ICON Lib静态·未分类如果你在找一个可以完全免费商用、并且功能上能替代 Font Awesome Pro 的图标库,下面这些都是优秀的选择: 🥇 1. Phosphor Icons 风格多样(填充、线性、粗体、细线等统一设计风...
Vue 组件动态参数
动态属性1<MyCarousel v-bind="shouldAutoplay ? { autoplayInterval: 3000 } : {}" /> 组合多个条件对象时,… 就会有用: 123456<MyCarousel v-bind="{ ...baseProps, ...(shouldAutoplay ? { autoplayInterval: 3000 } : {}), ...(showArrows ? { showArrows: true } : {})}" /> 动态 Style123456789101112<template> <div :style="{ width: widthValue }" class="your-other-classes"> <...
Github Actions
https://docs.github.com/actions/quickstart
Github-notifier
github-telegram-notifierhttps://github.com/marketplace/actions/github-telegram-notifier https://github.com/EverythingSuckz/github-telegram-notify 流程: 1
Vue-工具
use-gesturehttps://github.com/pmndrs/use-gesturehttps://use-gesture.netlify.app/
Vue-自制组件
侧边栏你真的会写侧边栏收起动画吗? https://www.cnblogs.com/evesama/p/18113089 Figma 动画: 【Figma动效】超丝滑的APP侧边栏弹性动画 https://www.bilibili.com/video/BV1WV4y1H7nE/?share_source=copy_web&vd_source=73ff19f791037fa3c29018757767f2f9
Vue-css
还记得 当初 react 要处理动态CSS依赖于别的库 https://emotion.sh/docs/introduction , vue 在这方面就方便得多。 那么,一些别的处理呢,比如 主题化: https://vuetiful.dev/docs/getting-started 常用的库: unocsshttps://github.com/unocss/unocsshttps://unocss.dev/ https://unocss.dev/integrations/vscode https://unocss.dev/guide/ WindicssTailwindcss冲突解决方案:https://tailwindcss.com/docs/configuration/#prefix Animation@vueuse/motion基础库: normalizehttps://github.com/necolas/normalize.css