这几天我把 Docusaurus 升级到了 3.6，主要是因为这个版本引入了 Rspack 和 SWC 等酷炫技术，把打包速度提升了好几倍。以前打包大概要一两分钟，现在只需要五六秒就搞定了！ ...继续阅读 (17)

前端真的很好学，一个新的框架，最长、最长花一周时间就能学会，还是说得像 React 或 Vue 这种颠覆性的框架的，其他的看看文档，少的 5 分钟就回了，长的 1 天，真的没啥难的。 ...继续阅读 (39)

Vite 和 Webpack 都是现代前端开发中常用的打包工具，但在设计和使用上存在很大的区别。本文将详细介绍 Vite 和 Webpack 的比较与区别，帮助你选择适合自己项目的打包工具。 ...继续阅读 (33)

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。 ...继续阅读 (41)

常用表单组件：单选按钮、复选框、下拉菜单和文本域的数据绑定方法。单选按钮绑定的值是单一的，复选框绑定的值是一个数组，下拉菜单和文本域绑定的值也是单一的，跟文本输入框的绑定方式基本一样。 ...继续阅读 (35)

在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。 ...继续阅读 (32)

Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示 ...继续阅读 (32)

计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性... ...继续阅读 (34)

我们知道在 Vue 应用中，当 data 里边的属性变化的时候，HTML 模板中使用到这个属性的地方，会自动更新，但是如果我们想在 JavaScript 中，监听某个属性的变化，并做一些操作，该怎么办呢？这个时候可以使用 Vue 提供的 watch 选项，为属性添加一个监听器。 ...继续阅读 (38)

我们在 createApp() 的参数对象中，传递一个 methods 配置对象，在它里边可以添加应用程序会用到的方法，之后就可以在 html 模板中使用了，一般我们把方法用作 html 元素的事件处理函数，直接在对应的事件监听处，写上方法名就可以了。 ...继续阅读 (30)

市面上的编程语言越来越多，如果你考虑到后续的工作中有可能需要用到新的编程语言，或者你想转型成新的、热门的编程语言开发，那么就可能会有这样的顾虑：到底需不需要学习新的编程语言？如果要学的话，该怎么快速的学会？这篇文章我们就来看看，为何要学习多门编程语言，以及如何学会任何一门编程语言。 ...继续阅读 (35)

我们通过给 Vue.createApp() 的参数对象中，添加一个 computed 属性，来定义计算属性，每个计算属性都是一个函数，在函数里边可以进行一些简单的数据计算，并且它能够通过 this 来访问 Vue 实例里的内容，例如 data() 函数返回的对象属性。之后，在 html 模板中，就可以直接使用函数名来访问计算属性的值了。 ...继续阅读 (29)

vue 中注册和处理事件的方法，使用 v-on: 或 @ 简写形式，加上去掉 on 的 html 事件名来注册事件，之后在指令的值中，使用 JavaScript 表达式来处理事件。另外也见识到了 vue 响应性的魅力，当处理事件时，改变了 data 中的某个属性值，那么所有使用到这个属性值的地方都会进行更新。 ...继续阅读 (30)

在前端开发中，除了需要经常展示列表内容外，还经常会根据一定条件展示页面内容，例如点击按钮的时候弹出对话框，当列表内容为空时，显示空白提示，或者在表单中展示验证错误等。那么在 Vue 中，我们使用 v-if 以及相关的 v-else-if 和 v-else 指令来实现条件判断，或者使用 v-show 指令。我们分别看一下它们的作用、使用方法和区别。 ...继续阅读 (34)

vue 中展示列表数据的方法，使用 v-for 指令，遍历 data 中数组类型的属性，并且还可以访问索引和遍历对象数组。另外对于 vue 的模板，在插值中可以直接使用 JavaScript 表达式，对某个变量进行数学运算，或访问对象类型的变量。对于只有单独的一个属性名的情况，也利用 v-bind 进行数据绑定。 ...继续阅读 (32)

Vue 的 data 属性的使用方法，data 属性值是一个函数，函数需要返回一个对象，对象中的顶级属性可以直接在 HTML 模板中使用，使用方式为两个大括号中间，写上属性的名字，在实际运行的时候，vue 就会把它们替换成真实值。 ...继续阅读 (27)

Rust 是一款操作系统级的通用编程语言，由 Mozilla 组织开发，对标 C++ 等语言。Rust 语言如此受欢迎，那么作为爱钻研的程序员，避免不了试一试了，这篇文章我们就来看看如何配置 Rust 的开发环境，并看看一个简单的 Rust 项目长什么样。如果你有 Node.js 开发经验，会更容易了解 Rust 项目的创建和开发流程。 ...继续阅读 (26)

data 中的数据绑定到 html 属性的过程，就是使用 v-bind 指令，在冒号后面写上 html 原生的属性名，然后值为 data 中的属性名。v-bind 可以使用简写形式，只保留一个冒号，这个是推荐的写法。 ...继续阅读 (30)

在开发 Vue 项目之前，需要配置好一个顺手的开发工具，目前比较流行的前端开发工具是 VS Code，我们需要安装一些相关的插件，来方便我们的开发，例如代码提示、自动补全、格式化等。 ...继续阅读 (31)

早在 2018 年开始写博客的时候，就收到过编辑的出书邀请，当时答应了要写，但出了点意外就没有写成。后来 2019 年开始做 B 站，做了几个月后又收到清华大学出版编辑的邀请，而我想把曾经的愿望实现，于是就答应了，这样出版了我人生的第一部书籍《JavaScript 基础语法详解》。现在总结一下出版过程，除了好好欣赏一下劳动成果外，也给你提供一些经验，如果哪天你也决定出书了，可能会对你有所帮助。 ...继续阅读 (27)

前端作为比较新的技术岗位，涉及范围广泛，市面上也没有成体系的、适用于所有人的学习方法。这篇文章，将分享一下我转型成为前端工程师的经历，以及我在学习前端开发过程中，遇到的问题和总结出来的一些经验，希望对你有所启发。 ...继续阅读 (29)

使用 Vite 创建前端项目的时候（例如 Vue 3.0 项目）不会自动添加 ESLint 的配置，但 ESLint 又是维护良好代码规范和方便团队合作的重要工具，所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下： ...继续阅读 (28)

距离从美国史蒂文斯理工学院毕业已经有 4 年了，时间过的真快。此前一直从事 Java 开发的我，在学院读研的时候选择了最难的云计算相关的课，这门 CS549 《Distributed Systems and Cloud Computing》（分布式系统和云计算）就是其中之一，4年过去也忘的都差不多了，现在随着自己的爱好转行做了前端，不过以前的知识也不能全忘，说不定后面还用的到，现在回顾以前的一些学习经历吧，希望对你也有所帮助。 ...继续阅读 (34)

Nest.js 是基于 Node.js 的企业级开发框架，跟 Java 的 Spring 差不多，提供了 RESTful API、数据库、验证鉴权、GraphQL、微服务、WebSocket 等常见的企业级业务组件，可以说覆盖了一个应用的所有业务需求。Sqlite3 是一个小型的、全功能的关系型数据库（RDBMS），支持完整的 SQL 语言。 ...继续阅读 (34)

在编写技术文档的时候，我们经常会给用户展示一些常用的快捷键，那么在 HTML 中，我们可以使用原生的 ` 标签来表示一个按键，它也是 HTML 语义化的标签之一，相比于使用 等通用的、无意义的标签，使用语义化的 ` 可以直接知道这是代表按键的元素。 ...继续阅读 (32)

环境变量是在开发中，用于设置可配置的信息。例如在前端开发中，我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量，这篇文章我们来看一下如何在 Vite 2.0 创建的项目中，创建和导入环境变量。 ...继续阅读 (29)

自动打开浏览器的方法，主要是设置 server.open 配置项，它可以设置为 boolean 类型的值，也可以设置 string 类型的值。Boolean 类型的值用于控制是否自动打开浏览器，string 类型的值则是自动打开指定 URL。另外我们还可以通过设置 process.env.BROWSER 的值来指定要打开的浏览器。 ...继续阅读 (28)

自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。 ...继续阅读 (29)

我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，针对这两种情况，可以直接用同一个配置来解决，即代理配置。 ...继续阅读 (29)

我们前端工程师在开发完前端项目，并把它打包成静态的网站之后，需要上传到服务器上，才能让互联网上感兴趣的用户来访问。因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的，那就需要在服务器里面安装一个服务器程序，来处理 HTTP 请求，并把我们的静态网站发送到用户的浏览器上。 ...继续阅读 (30)