河豚的前端之路

遇见问题在用我自己的脚手架创建项目时，遇到了一个报错，但别人同样的操作没有报错。然后打开.log文件，看到了更详细一点的报错信息。 分析问题搜索Error: could not determine executable to run和getBinFromManifest发现，并没有明确的原因，很多人解决的方法（解决方案集合）都完全不一样。我一一都试了也不行。然后再看报错信息的后面几行，发现了有什么地方不对劲，我要使用的create-pro的版本根本不是0.0.0，而打开第14行的链接，这个npm包也不是我要用的那个。我的库是放在某个scope下的，这个链接指向的包与我的包同名，但不在scope内。但是我要用的库已经全局安装过了，不明白为什么npm拉错了包。 解决问题12# npm create pro // 原命令npm create @chen/pro // √ 总结遇到这个报错的时候，如果也是使用脚手架，可以看看包是否在scope内。不然，可以先看看命令有没有语法错误，然后试试重启vscode、重新安装依赖、赋予当前用户对node完全控制的权限等方法。

CICDCICD 是“持续集成”（Continuous Integration）和“持续交付/部署”（Continuous Delivery/Deployment）的缩写。它是一种软件开发实践，旨在通过自动化工具和流程提高软件开发的质量和效率。 持续集成要求开发人员频繁地将代码提交到共享的版本控制系统中。 持续集成的流程： 开发人员提交代码到版本控制系统（如 Git）。 自动化构建系统自动拉取最新的代码。 执行自动化构建和测试。 发现并报告错误或失败的测试。 持续交付是在持续集成的基础上进一步扩展，确保每次提交的代码都可以随时部署到生产环境中。 持续交付的流程： 自动化构建和测试。 自动化部署到测试环境。 手动或自动化部署到生产环境。 持续部署是在持续交付的基础上进一步扩展，自动将通过测试的代码部署到生产环境中。 持续部署的流程： 自动化构建和测试。 自动化部署到测试环境。 自动化部署到生产环境。 Github ActionsGitHub Actions 是 GitHub...

前言在开发中，经常会遇到超出省略并显示…的需求。有时，还需要做到在鼠标移入的时候显示具体内容。这些都很简单，但如果要实现“文本如果超出就在鼠标移入时显示具体内容，文本不超出鼠标移入就不显示”，就有一点点麻烦。而且，文本长度通常不固定，需要这种处理的文本有多个。所以，在此总结一下如何实现这个功能。 文本超出显示…分为单行文本和多行文本2种情况，代码如下所示。 1234567891011121314// 单行文本.text-single { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}// 多行文本.text-multi { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient:...

前言CSS变量和CSS函数可以帮助开发者方便地实现功能。 CSS变量1234567:root { --main-bg-color: brown;}element { background-color: var(--main-bg-color);} CSS变量名以–开头；变量可以继承父元素的值；var第2个参数为备用值，变量不生效时被使用； CSS函数常用的css函数包括：calc()、linear-gradient()、translate(), rotate(), scale()、rgba()、hsla()、attr()、clamp()、min()、max()。 calc()执行计算123.container { width: calc(100% - 30px);} linear-gradient()创建一个线性渐变123.background { background-image: linear-gradient(to right, red,...

1.docker的作用打包、分发、部署打包：就是把你软件运行所需的依赖、第三方库、软件打包到一起，变成一个安装包；分发：你可以把你打包好的“安装包”上传到一个镜像仓库，其他人可以非常方便的获取和安装；部署：拿着“安装包”就可以一个命令运行起来你的应用，自动模拟出一模一样的运行环境，不管是在 Windows/Mac/Linux。 2.docker命令1docker build -t test:v1 . -t 指定镜像名字和版本号；. 指在当前目录build，将当前目录作为构建上下文；参考链接：docker build命令 1docker run -dt -p 8089:8089 demo -p port1:port2 指定端口号，port1要访问的端口号，port2docker内部使用的端口号；-d 后台运行，-i 以交互模式运行容器，-t为容器重新分配一个伪输入终端，-it在一个新终端里运行容器，-dt在终端的后台运行容器；参考链接：docker run命令 其他常见命令如下所示：docker ps 查看当前运行中的容器docker...

前言任何人在任何时候都有可能悄无声息的把大写锁定打开。在大部分输入时，用户可以轻易地发现输入的是大写。但，在输入密码时，用户就不容易发现了。为了更好的用户体验，我们可以在用户输入密码时提示大写锁定已开启。你也一定见过这种场景吧。 提示用户大写锁定已开启123456789const inputElement = document.querySelector('#your-input-element');inputElement.addEventListener('keydown', function(event) { if (event.getModifierState('CapsLock')) { console.log('大写锁定是打开的'); } else { console.log('大写锁定是关闭的'); ...

前言在这篇文章中，作者将演示如何用200多行JS实现一个虚拟DOM。而且实现的是一个功能齐全、性能足够的npm库。主要目标是说明react、vue等框架背后的基本技术。react、vue、Elm都允许用户描述网页外观，从而简化了交互式网页创建，不必使用添加/删除元素来实现该页面，它们都是通过虚拟DOM来做到的。 Elm是一个纯函数式的语言，它声明式的创建网页。 虚拟DOM的目标它与性能无关。 虚拟DOM是一种抽象，它用于简化修改UI的操作。 用户描述期待的外观，库负责将DOM从当前状态转换成用户期望的状态。 关键思想该库将接管单个DOM并在其中进行操作。 该元素最初应该是空的，而且假设除了该库没有任何东西能修改它，这是用户应用程序的根。 如果只有我们能修改它，那么我们不需要检查就可以知道元素里都有什么。如何知道？通过追踪我们对它的所有修改。 我们将通过保留包含每个HTML元素简化表示的结构，来追踪根节点的内容。准确的说，是每个DOM节点。 因为这个表示是真实DOM的映射，不在真实的DOM中，所以称其为虚拟节点。它们组成虚拟DOM。 用户永远不会创建真实的 DOM...

前言某些情况下，我们可能想要知道接口是否在设定时间内返回。比如，请求发出30s还没返回就可以提示用户当前堵塞是否继续排队。比如，某个请求正常情况下3s返回结果，如果等30s没结果就可以丢弃这次结果。比如，超过设定时间后自动重试。 axios设置timeout1234567891011121314151617import axios from 'axios'; // 设置超时时间为10秒 const timeout = 10000; // 发送请求 axios.get('https://api.example.com/data', { timeout: timeout }) .then(response => { console.log('请求成功:', response.data); }) .catch(error => { if (axios.isCancel(error)) { ...

前言需要实现的功能是，打开 http://a.b.c.d 可以访问服务器上的某个目录。而且，在第一次登录及登录过期时会进行登录，登录成功后才可以访问到目录。 开启目录浏览功能使用 autoindex 指令可以开启目录浏览功能。不仅要设置autoindex，还必须要设置root或alias。 访问 / 时，根目录开启目录浏览1234localtion / { root /; autoindex on; } 访问存在的path时，该子目录开启目录浏览1234location /a/ { root /; autoindex on; } 访问不存在的path时，某个子目录开启目录浏览功能1234location /x/ { alias /b/; # 注意 最后一个/是必需的 autoindex on; } 其他autoindex指令 autoindex_exact_size on | off;：控制是否显示文件的精确大小。默认为...

前言tailwind学习曲线比较陡峭，熟悉之后会方便开发，但熟悉之前需要频繁查文档。下面讲一下如何使用tailwind及常用样式，帮助快速上手。我使用的技术栈是vite+vue。 安装安装12npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 添加配置123456// tailwind.config.js export default { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } 引入tailwind样式1234// style.css @tailwind base; @tailwind components; @tailwind...