河豚的前端之路

介绍这是一个帮助用户在日常中学习单词的软件，包含浏览器插件和微信小程序。 使用流程：1.安装浏览器插件；2.微信扫码登录小程序；3.在网页中选中单词，即可获取翻译结果，可以收藏或取消收藏该单词；4.在微信小程序中复习单词； 浏览器插件： 微信小程序： 开发浏览器插件注意事项content.js与background.js的区别content.js： 直接与网页内容交互，可以修改网页结构、监听用户点击事件等； 无法访问页面的js变量或函数，请求受同源策略限制； 仅能调用部分Chrome API，如chrome.runtime.sendMessage、chrome.storage； 无法直接访问chrome.tabs或chrome.windows等涉及浏览器全局操作的API background.js： 作为全局后台服务，负责处理跨域请求、调用高权限API（通知推送、浏览器标签管理等）； 生命周期与浏览器同步，支持跨域访问； 可调用所有Chrome API； 消息传递content -> background 1234567891011// content...

...

前言浏览器的一些默认样式，我们可能不需要。比如，body {margin: 8px;}，我们一般希望最外层没有外边距，特别是在有<header />或背景图时。再比如，<img/>默认展示为原图大小，原图的宽高一般都非常大，我们可能希望图片不要超过父元素。 重置的规则接下来，详细讲一下部分规则，一些显而易见的规则就没必要一一说明了。 line-height浏览器的默认行高一般是1.2，但这个距离可能会有点紧凑，而且WCAG 标准规定行高应至少为 1.5。行高可以继承，所以在body上设置就可以了。 123body { line-height: 1.5;} 这个方法有个缺点：如<h1/>的行间距太大了。 另一个方法是，以font-size为基础，每行添加固定高度。 123* { line-height: calc(1em +...

创建项目首先，创建项目，vuepress-starter代表你的项目名， 1npm init vuepress vuepress-starter 页面目录结构如下图所示，然后启动项目， 1npm run docs:dev 自定义首页首先在.vuepress/layouts/LayoutHome.vue中定义首页如何布局，然后在/vuepress/clients.js中注册该布局，最后在README.md中声明首页使用此布局。 123456789// /vuepress/clients.jsimport { defineClientConfig, resolvers } from 'vuepress/client';import LayoutHome from './layouts/LayoutHome.vue';export default defineClientConfig({ layouts: { LayoutHome, },}) 1234---home:...

前言我经常使用watch和watcheffect，但前几天遇到一个稍微复杂点的功能，就出现了意料之外的情况，感觉对它们了解的还不够。所以，在此详细探索一下它们。 watch vs watchEffect它们的相同点是都可以监听响应式数据的变化，并执行回调函数。不同点比较多。不同点如下： watch需要显示指定要监听的数据，watchEffect会自动收集依赖； watchEffect会立即执行一次，watch在设置{immediate: true}时才会立即执行一次； watch可以获取到旧值，watchEffect不可以； watch可以通过选项设置为仅执行一次，watchEffect不可以； watch可以设置监听对象的层数，watchEffect不可以； 官方文档也有指出，watch相对于watchEffect的优点： 与 watchEffect() 相比，watch()...

遇见问题在用我自己的脚手架创建项目时，遇到了一个报错，但别人同样的操作没有报错。然后打开.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...