前端： 63 篇

按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。

一开始，我想从它的官方库里找找，看看有没有直接用 CSS 写好的源码，发现没有，就找了最容易查看细节的 SVG 的文件。

把它导入 figma 之后，发现啥用也没有，我以为能直接看背景矩形的圆角，发现无论是这个背景还是 CSS 文字都是路径，没办法直接测量圆角。

然后我又想看一下 CSS 与边框的距离，发现这些数字也不是挺精确...大概 34px 吧，不知道是不是软件的问题，算啦，就简单粗略的还原一下吧。圆角的问题，这里我直接覆盖一个新的矩形，调一下透明度，然后调整圆角，直到和 logo 的圆角看起来一致就好了，大概 68px，这里注意一下，CSS 最后一个 S 的弧度和这个圆角似乎也保持了一致。再看宽度和高度是 440px。背景紫色是 #663399，这个官方仓库也写明了。

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

升级过程其实很简单，就是在 package.json 里把版本号改成最新的 3.6.1（当下最新版）。

随着现代网页设计的发展，CSS 动画已逐渐成为构建用户体验良好、互动性强的网站的关键。相比于静态的页面布局，动画能为用户带来更丰富的视觉体验，也能帮助网页更好地传达信息。

那么，为什么要用 CSS 动画呢？简单来说，CSS 动画可以通过视觉效果引导用户注意页面上的重要内容，例如按钮、链接、图标等，使用户的交互体验更加直观、自然。通过适当的动画设计，页面可以显得更具活力和吸引力，提高用户的留存率与参与度。

CSS 动画在网页中的应用也变得越来越重要。无论是加载动画、鼠标悬停效果，还是页面滚动时的动态内容展示，CSS 动画都能够轻松实现。再由于 CSS 动画轻量和高效的特性，我们可以在不影响页面性能的前提下，增强网站的互动性与用户体验。

这篇文章将详细介绍 CSS 动画的基础知识、关键技巧和常见应用，帮助初学者全面掌握 CSS 动画的使用方法，使大家能够轻松地为网页添加动态效果，提升网页开发和设计的专业性以及吸引力。

什么是CSS动画？​

CSS 动画是通过定义一系列关键帧或过渡效果，使网页中的元素在指定时间内发生变化的一种技术。它能让网页元素平滑地改变属性，例如位置、大小、颜色、透明度等。

在现代网页设计中，CSS 动画有多种用途，常见的包括：

• 加载动画：帮助用户了解页面正在加载，可以缓解因为等待而带来的焦虑感。
• 交互效果：如按钮悬停、点击效果等，当用户与页面交互时，动画可以反馈出响应状态，提升用户的互动体验。
• 滚动效果：在页面滚动时展示的动画内容，使得页面不再是静态的、单一的文本和图片，增加了视觉层次感。

在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。本文将分享 10 个 CSS 一行代码技巧。

1. 居中对齐​

居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。

display: grid; place-items: center;

前言​

在现代前端开发中，打包工具已经成为不可或缺的一部分。它们可以将多个文件合并为一个或多个文件，使前端应用的加载和运行速度更快。目前，Vite 和 Webpack 是最受欢迎的打包工具之一。本文将介绍它们之间的比较和区别，以帮助你选择适合自己项目的工具。

什么是 Vite？​

Vite 是一种新型的前端构建工具，旨在提高开发过程中的开发体验和构建速度。它支持所有的现代前端框架，如 Vue、React、Angular等，以及原生的 HTML/CSS/JS 应用。

Vite 的核心理念是“快速开发”。它采用了一种新的开发方式，即在开发过程中不需要事先打包应用程序，而是在应用程序运行时即时编译和构建。这种方式使得开发者可以更快地编写代码，而无需等待长时间的编译和构建过程。

什么是 Webpack？​

Webpack 是一个广泛使用的打包工具，为现代 Web 应用程序提供了强大的静态资源管理功能。Webpack 可以将多个文件打包成一个或多个文件，并使它们在浏览器中快速加载。Webpack 是一个高度可配置的工具，因此可以根据项目的需要进行定制。

Webpack 的核心理念是“模块化”。它支持使用各种语言和框架编写模块，并将它们打包成可在浏览器中使用的 JavaScript 文件。Webpack 还提供了强大的插件系统，可以扩展其功能。

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

React 框架简介​

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式，使得开发者可以将一个 Web 应用程序拆分成多个组件，每个组件负责不同的功能，从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术，可以最小化 DOM 操作，从而提高性能。另外，React 还拥有丰富的生态系统，包括 React Router、Redux、React Native 等等，可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

我们在前端开发中，经常会有居中某个元素的需求。因为 CSS 对于居中的方式有多种多样，在不同场景下有不同的效果，需要特别记住它们的应用场景才能够正常的居中元素。那么这篇文章，我们就看一下在 CSS 中，水平居中一个元素的不同方法和技巧，帮助你在前端开发中更加游刃有余。

使用 text-align 居中行内元素​

text-align 不仅可以居中文本，还可以居中行内元素（如文本或图片）。把父元素的 'text-align' 设置为 center，然后把子元素的 display 属性设置为 inline 就可以了。

.parent-element {
  text-align: center;
}

在开发大型 Vue 项目的时候，有的组件会嵌套的很深，如果需要引入外层其他目录的组件，需要编写很长一段相对路径。假如有如下组件目录结构：

/Layout/Header/NavBar.vue
/Base/BaseLink.vue

如果在 NavBar 中引入 BaseLink 组件，需要使用下面的路径进行导入：

NavBar.vue
<script>
import BaseLink from '../../Base/BaseLink.vue';
</script>

这里使用了两个 ../ 才访问到 Base 目录，如果这个时候，我们给 ../../ 设置一个别名，例如 @，那么就可以使导入路径更简洁，变成：

@/Base/BaseLink.vue

Vite 支持设置路径别名，来支持这种形式的导入。

这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。 我们继续使用上篇文章的项目示例，这里我把 html 中，class 为 form 的 div 改成了 form 元素，CSS 的样式也作了对应的调整。

<div class="form">
  ->
  <form></form>
</div>

现在，我们在 form 元素的结束标签之前，添加一个 button 按钮元素，作为表单的提交按钮，点击它表单就会提交。

<textarea id="intro" rows="10" v-model="intro"></textarea>
<!-- 在这里添加 -->
<button type="submit">提交</button>

上篇文章我们学习了如何使用 v-model 绑定 input 输入框和 data 中的属性，这篇文章我们来看一下其它表单控件的绑定方法。

示例​

这里示例大体的样式和结构我已经写好了，你可以从视频里附带的源代码示例里，直接编写代码。用户名这个我们上篇文章介绍了，这个就先不管它了。

单选按钮​

我们先看一下单选框的数据绑定。假如我们让用户选择一下性别，男和女。我们在 HTML 模板中：

• 定义一个 type 为 radio 的 input，name 设置为 gender，这里的 name 相同的 radio 单选框才能形成一个单选按钮组，这样选择是互斥的。
• value 设置为 male，表示男性，这个是单选按钮选中之后，实际获取到的值。这里之所以用英文，是遵循了软件开发的一些最佳实践，方便后端程序或数据库，用枚举的形式存储数据，而枚举的属性名一般用英文。
• 在 input 后面，我们用一个 span 元素显示给用户看的值，这里写上『男』。
• 这里用 v-model 绑定一个名为 gender 的属性，这个我们稍后再在 data 里定义。