<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://zxuqian.cn/blog</id>
    <title>峰华前端工程师</title>
    <updated>2026-01-06T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://zxuqian.cn/blog"/>
    <subtitle>峰华前端工程师 Blog</subtitle>
    <icon>https://zxuqian.cn/img/favicon.ico</icon>
    <rights>Copyright © 2026 峰华前端工程师 Built with Docusaurus.&lt;p&gt;&lt;a href="http://beian.miit.gov.cn/" class="footer_lin"&gt;冀ICP备14007097号-3&lt;/a&gt;&lt;/p&gt;</rights>
    <entry>
        <title type="html"><![CDATA[SSH Host key verification failed：原来是我没输入 yes（真实踩坑复盘）]]></title>
        <id>https://zxuqian.cn/blog/ssh-host-key-verification-failed-no-yes</id>
        <link href="https://zxuqian.cn/blog/ssh-host-key-verification-failed-no-yes"/>
        <updated>2026-01-06T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[新电脑 SSH 连接老服务器，提示 Are you sure you want to continue connecting 却依然 Host key verification failed？本文复盘一次真实踩坑：原因竟然只是没输入 yes。附正确交互逻辑与排查顺序。]]></summary>
        <category label="ssh" term="ssh"/>
        <category label="linux" term="linux"/>
        <category label="devops" term="devops"/>
        <category label="macos" term="macos"/>
        <category label="troubleshooting" term="troubleshooting"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[当我想用 CSS 写一个新 CSS Logo 的时候...]]></title>
        <id>https://zxuqian.cn/blog/when-I-try-to-write-the-new-css-logo-in-css</id>
        <link href="https://zxuqian.cn/blog/when-I-try-to-write-the-new-css-logo-in-css"/>
        <updated>2024-11-24T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[升级 Docusaurus 到 3.6，打包速度只需 5 秒钟]]></title>
        <id>https://zxuqian.cn/blog/upgrade-docusaurus-to-3-6</id>
        <link href="https://zxuqian.cn/blog/upgrade-docusaurus-to-3-6"/>
        <updated>2024-11-13T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[这几天我把 Docusaurus 升级到了 3.6，主要是因为这个版本引入了 Rspack 和 SWC 等酷炫技术，把打包速度提升了好几倍。以前打包大概要一两分钟，现在只需要五六秒就搞定了！]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="Docusaurus" term="Docusaurus"/>
        <category label="前端" term="前端"/>
        <category label="React" term="React"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[CSS 动画完全指南]]></title>
        <id>https://zxuqian.cn/blog/css-animation-from-beginner-to-advanced</id>
        <link href="https://zxuqian.cn/blog/css-animation-from-beginner-to-advanced"/>
        <updated>2024-11-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[描述]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[10 个 CSS 1 行代码技巧]]></title>
        <id>https://zxuqian.cn/blog/10-css-one-liners</id>
        <link href="https://zxuqian.cn/blog/10-css-one-liners"/>
        <updated>2023-05-29T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[介绍了 10 个 CSS 单行代码技巧，旨在提升日常开发中样式设置的效率和简洁度。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="CSS" term="CSS"/>
        <category label="单行代码" term="单行代码"/>
        <category label="效率" term="效率"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[12个 JavaScript 一行代码技巧]]></title>
        <id>https://zxuqian.cn/blog/javascript-one-liners</id>
        <link href="https://zxuqian.cn/blog/javascript-one-liners"/>
        <updated>2023-05-24T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[JavaScript是一种功能强大的编程语言，我们可以通过使用一行代码实现很多功能。在这篇文章中，我们将探讨12个有用的 JavaScript 一行代码技巧。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="JavaScript" term="JavaScript"/>
        <category label="代码技巧" term="代码技巧"/>
        <category label="一行代码" term="一行代码"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vite 和 Webpack 的比较与区别]]></title>
        <id>https://zxuqian.cn/blog/difference-between-vite-and-webpack</id>
        <link href="https://zxuqian.cn/blog/difference-between-vite-and-webpack"/>
        <updated>2023-05-21T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Vite 和 Webpack 都是现代前端开发中常用的打包工具，但在设计和使用上存在很大的区别。本文将详细介绍 Vite 和 Webpack 的比较与区别，帮助你选择适合自己项目的打包工具。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vite" term="Vite"/>
        <category label="Webpack" term="Webpack"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[如何使用 JSX 编写 React 组件]]></title>
        <id>https://zxuqian.cn/blog/how-to-write-components-using-jsx-in-react</id>
        <link href="https://zxuqian.cn/blog/how-to-write-components-using-jsx-in-react"/>
        <updated>2023-05-06T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="React" term="React"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[10 种方法使用 CSS 水平居中一个元素]]></title>
        <id>https://zxuqian.cn/blog/how-to-horizontally-center-an-element-using-css</id>
        <link href="https://zxuqian.cn/blog/how-to-horizontally-center-an-element-using-css"/>
        <updated>2023-03-31T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[深入了解多种 CSS 水平居中技巧，提升您的网页设计能力，打造视觉效果出众的用户体验。探索这个全面的指南，成为 CSS 居中专家！]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[配置 Vite alias 别名导入，避免冗长的相对路径]]></title>
        <id>https://zxuqian.cn/blog/vite-config-alias-to-void-long-relative-path</id>
        <link href="https://zxuqian.cn/blog/vite-config-alias-to-void-long-relative-path"/>
        <updated>2022-12-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[利用 Vite alias 别名导入，可以在嵌套层次比较深的组件中，避免导入外层其他目录的组件，需要编写很长的相对路径的问题。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue3 表单提交事件处理]]></title>
        <id>https://zxuqian.cn/blog/vue-3-form-submit-event-handling</id>
        <link href="https://zxuqian.cn/blog/vue-3-form-submit-event-handling"/>
        <updated>2022-10-04T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 3 常见表单控件事件处理]]></title>
        <id>https://zxuqian.cn/blog/vue-3-common-form-controls-handling</id>
        <link href="https://zxuqian.cn/blog/vue-3-common-form-controls-handling"/>
        <updated>2022-10-03T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[常用表单组件：单选按钮、复选框、下拉菜单和文本域的数据绑定方法。单选按钮绑定的值是单一的，复选框绑定的值是一个数组，下拉菜单和文本域绑定的值也是单一的，跟文本输入框的绑定方式基本一样。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 3 表单输入控件数据处理]]></title>
        <id>https://zxuqian.cn/blog/vue-3-form-handling</id>
        <link href="https://zxuqian.cn/blog/vue-3-form-handling"/>
        <updated>2022-10-01T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue methods 方法和 watch 监听器的区别]]></title>
        <id>https://zxuqian.cn/blog/vue-methods-vs-watchers</id>
        <link href="https://zxuqian.cn/blog/vue-methods-vs-watchers"/>
        <updated>2022-09-24T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue computed 计算属性和 watch 监听器的区别]]></title>
        <id>https://zxuqian.cn/blog/vue-computed-and-watch-difference</id>
        <link href="https://zxuqian.cn/blog/vue-computed-and-watch-difference"/>
        <updated>2022-09-19T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性...]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 计算属性和方法的区别]]></title>
        <id>https://zxuqian.cn/blog/vue-computed-vs-methods</id>
        <link href="https://zxuqian.cn/blog/vue-computed-vs-methods"/>
        <updated>2022-09-16T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[计算属性、方法和监听器这三种方式是有一定的区别的，但有时候也并不严格区分，接下来的几节课我们看一下它们的区别，之后你就会自己决定什么时候使用哪一个了]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="vue" term="vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 3 使用 watch 监听数据的变化]]></title>
        <id>https://zxuqian.cn/blog/vue-watch-props-change</id>
        <link href="https://zxuqian.cn/blog/vue-watch-props-change"/>
        <updated>2022-09-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我们知道在 Vue 应用中，当 data 里边的属性变化的时候，HTML 模板中使用到这个属性的地方，会自动更新，但是如果我们想在 JavaScript 中，监听某个属性的变化，并做一些操作，该怎么办呢？这个时候可以使用 Vue 提供的 watch 选项，为属性添加一个监听器。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 3 中的 methods 方法使用教程]]></title>
        <id>https://zxuqian.cn/blog/vue-3-methods-tutorial</id>
        <link href="https://zxuqian.cn/blog/vue-3-methods-tutorial"/>
        <updated>2022-09-03T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我们在 createApp() 的参数对象中，传递一个 methods 配置对象，在它里边可以添加应用程序会用到的方法，之后就可以在 html 模板中使用了，一般我们把方法用作 html 元素的事件处理函数，直接在对应的事件监听处，写上方法名就可以了。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[如何学会任意一门编程语言]]></title>
        <id>https://zxuqian.cn/blog/how-to-learn-any-programming-language</id>
        <link href="https://zxuqian.cn/blog/how-to-learn-any-programming-language"/>
        <updated>2022-08-19T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[市面上的编程语言越来越多，如果你考虑到后续的工作中有可能需要用到新的编程语言，或者你想转型成新的、热门的编程语言开发，那么就可能会有这样的顾虑：到底需不需要学习新的编程语言？如果要学的话，该怎么快速的学会？这篇文章我们就来看看，为何要学习多门编程语言，以及如何学会任何一门编程语言。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="编程" term="编程"/>
        <category label="学习方法" term="学习方法"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑]]></title>
        <id>https://zxuqian.cn/blog/how-to-use-computed-deal-with-complex-logic</id>
        <link href="https://zxuqian.cn/blog/how-to-use-computed-deal-with-complex-logic"/>
        <updated>2022-08-17T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我们通过给 Vue.createApp() 的参数对象中，添加一个 computed 属性，来定义计算属性，每个计算属性都是一个函数，在函数里边可以进行一些简单的数据计算，并且它能够通过 this 来访问 Vue 实例里的内容，例如 data() 函数返回的对象属性。之后，在 html 模板中，就可以直接使用函数名来访问计算属性的值了。]]></summary>
        <author>
            <name>峰华前端工程师</name>
            <uri>https://github.com/zxuqian</uri>
        </author>
        <category label="前端" term="前端"/>
        <category label="Vue" term="Vue"/>
    </entry>
</feed>