跳到主要内容位置
6
2022年8月

配置 Rust 开发环境

张旭乾
前端Rust

Rust 是一款操作系统级的通用编程语言，由 Mozilla 组织开发，对标 C++ 等语言。因为是通用编程语言，我们可以使用 Rust 开发前端、后端、移动端、嵌入式、系统通信等的各类软件工具。

Rust 语言有下面这些特性：

  • 没有垃圾回收器，能够避免内存泄漏，提高程序的运行效率，这是最重要的特性。
  • 有丰富的类型系统，并保证类型安全，使用 Rust 编写的代码，只要编译通过，在运行时基本上就没有什么问题了。
  • 生态丰富，有类似于 npm 的 crate 库，由第三方开发者提供多种多样的工具，例如 http、文本处理、文件处理等等。

Rust 在 stackoverflow 开发者调查中，连续 7 年作为开发者最爱的编程语言，在 2022 年以 86.73% 的支持率排名第一：

stackoverflow developer survey

Rust 语言如此受欢迎，那么作为爱钻研的程序员，避免不了试一试了，这篇文章我们就来看看如何配置 Rust 的开发环境，并看看一个简单的 Rust 项目长什么样。如果你有 Node.js 开发经验，会更容易了解 Rust 项目的创建和开发流程。

5
2022年8月

使用 v-bind 在 HTML 属性中绑定 data 中的数据 - Vue 3.x 基础教程

张旭乾
前端vue

在了解了如何使用 data 定义模板中所需要的数据，以及如何在模板开合标签中绑定数据之后，我们来看一下如何在 HTML 属性中绑定 data 提供的数据。 在模板中，我们不能直接使用大括号的方式绑定数据，到 HTML 属性中：

X 错误
<a href="{{link}}">链接</a>

data() { return { link: "https://zxuqian.cn" } }

也不能直接使用 data 中的属性名，这样会被认为是普通的 html 属性：

<a href="link">链接</a>

data() { return { link: "https://zxuqian.cn" } }

正确的做法是使用 v-bind 指令。

4
2022年8月

创建 Vue 3.x 模板项目

张旭乾
前端Vue

我们在之前创建第一个 Vue 项目的时候，已经熟悉了 Vue 项目的开发流程，这节课我们再复习一遍 Vue 项目的创建和初始化过程，加深一下印象。

大体步骤​

  1. 一个简单的 Vue 项目，就是从普通的 HTML 页面开发起步的，那么就需要约定俗成的一套文件：HTML、CSS 和 JavaScript：
├── index.html
├── index.js
├── lib
│   └── vue.global.js
└── style.css

24
2022年7月

创建第一个 Vue 3.x 应用

张旭乾
前端vue

我们来开发第一个 Vue 3.x 的应用。我们会创建一个音乐播放列表，展示歌曲名称，还会提供一个搜索框，让用户搜索歌曲。

创建项目​

首先打开 VS Code，在一个合适文件夹下边创建项目的工作空间目录，工作空间就是一个文件夹，所有跟项目有关的文件都在这个目录下，VS Code 会把它们作为一个整体看待。 然后，像开发普通 HTML 页面一样，创建 index.html、style.css 和 index.js 文件。

引入 Vue​

打开 index.html 文件，在里面引入 style.css 和 index.js，这里把 index.js 的引入放到了 </body> 闭合处，这样在页面加载完成之后，才会执行 index.js 文件的代码。 接着，新建一个 lib 目录，把我们下载好的 vue 的 js 文件复制过来。 在 index.html 中，<head />标签结束前，引入 vue。

19
2022年7月

配置 Vue 3.x 项目的开发环境

张旭乾
前端Vue

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

VS Code​

VS Code 可以从官网下载：

https://code.visualstudio.com/

选择对应的操作系统版本下载，完成之后进行安装。 安装完成之后，打开 VS code，我们需要安装几个插件：

18
2022年7月

如何出版一本技术书籍：《JavaScript 基础语法详解》出版过程总结

张旭乾
前端软技能

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

15
2022年7月

如何使用 <script> 引入 Vue 3.x 框架

张旭乾
前端vue

在了解到 Vue 能够解决的众多问题之后，你是不是已经开始跃跃欲试了呢？那么这节课我们就看一下如何在项目中引入 Vue。引入 Vue 的方式大体有两种：

  • 使用 <script/> 标签。
  • 使用脚手架。

使用脚手架是比较高级的用法，这个我们在讲完组件之后再来看它怎么使用。

12
2022年7月

Vue.js 是什么样的框架？解决了传统前端开发中的哪些问题？

张旭乾
前端vue

以前我们在开发网页的时候，无论是使用 jQuery 还是原生的 JavaScript，大体的步骤都是这样的：

  1. 编写 HTML 页面结构，并规划哪些元素有可能会有交互，并赋予它们 ID 属性，方便后续在 JavaScript 获取对应的实例。
  2. 编写 CSS 样式，对于拥有多个不同页面的网站，可能需要有多个 CSS 文件。
  3. 编写 JavaScript 处理交互。

而在 JavaScript 中处理交互的时候，需要这样的步骤：

  1. 获取 DOM 元素。
  2. 添加事件监听。
  3. 根据事件对 DOM 数据的修改，手动更新相关的 DOM 元素，例如添加新的元素，删除已有的元素等。

一个例子​

来看一个例子，假设 HTML 页面中有一个 <ul/>列表元素，展示了一些列表项，下面有一个按钮和一个输入框，可以添加新的列表项到列表中，我们来看看它的代码实现。 首先看 HTML，很简单，就是一个 <ul/>列表嵌套了 3 个默认的<li/>列表项，下边一个 input 提示用户输入新的列表项内容，还有一个按钮把内容添加到列表项：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<input type="text" placeholder="请输入内容" />
<button id="btn">添加</button>

为了实现按钮的功能，需要使用 JavaScript，给按钮添加事件处理：

8
2022年5月

我是如何从 Java 工程师转型成为前端工程师的

张旭乾
前端经验

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

前端工程师的技能要求​

先看一下前端工程师需要掌握哪些技能。 综合大、中、小企业的前端工程师技能需求，实际上前端工程师的职能包含以下职业中的 1 种或多种：

  • 网页开发工程师
  • 网页设计师（UI）
  • 用户体验工程师（UE）

最重要的职能是网页开发，包括小程序、APP 等跨端应用界面的开发，虽然它们实现的技术不同，但本质上还是做页面。

前端工程师必备的技能有：

  • 使用 HTML + CSS，精准的还原设计稿，制作符合要求的页面。
  • 使用 JavaScript 给页面添加交互，懂得 DOM 操作和 ajax 请求。
  • 掌握 React 或 Vue 等主流框架的一种或几种，并了解随着这些框架的工程化，所牵涉的一系列工具（不同工程需要不同的工具，这里列出常见的）， 例如：
    • Node.js 与 npm。
    • Webpack、SnowPack、Vite 等打包工具。
    • Create React App、Vue CLI、Vite 等脚手架。（Vite 既包含脚手架，也包含打包工具）
    • Gulp、Grunt 等自动化工具。
    • SASS/LESS 等 CSS 预编译工具。
    • styled-components、emotion 等 CSS-In-JS 库。
    • ESLint 语法检查工具。
    • Jest、mocha 等测试库。
  • 兼容性调整，利用 CSS hacks，或 JS Polyfill，实现跨浏览器页面表现一致。
  • 性能优化，减少文件体积，减少请求次数，延迟加载图片和脚本等。
  • SEO 搜索引擎优化，提高网站在搜索引擎的排名。

其他的一些框架或技能，如果工作要求，也需要掌握：

  • SSR 服务端渲染框架，例如 Next.js（React）、Remix.js （React）、Nuxt.js（Vue）。
  • SSG 静态网站生成器，例如 Next.js、Gatsby、VuePress 等。
  • TypeScript。
  • GraphQL。
  • PS/Sketch/Figma，能根据需要进行切图，或者自行设计页面。

下面这些技能不是必须的，但是如果能掌握，可以提高工作效率、跟后端或设计师沟通的能力，以及求职升职的竞争力：

  • 网页设计，了解设计基本原则。
  • 用户体验设计，了解网页的动效、辅助功能对用户体验的影响。辅助功能（可访问性）在国外比较重视，目的是方便有阅读障碍的人士，使用屏幕阅读器进行网站浏览。如果你想去外企，这些技能是必须要掌握的。
  • Docker，了解如何把前端项目构建为 docker image，会编写简单的 docker file。
  • 后端语言、框架、数据库，任选一套，例如 Java + Spring + PostgreSQL，Express + Node.js + MongoDB 等，了解 RESTful API 开发过程。

乍一看要掌握的有很多，

1
2022年5月

配置 Vite ESLint VSCode 语法检查教程

张旭乾
ViteESLintVue前端

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

  • 如何给 Vite 创建的项目配置 ESLint
  • 集成 ESLint 到 VS Code 中
  • 避免 ESLint 和 Prettier 冲突。

什么是 ESLint​

ESLint 是一个用于检查 JavaScript 代码的工具。由于 JavaScript 的语法松散，并且是即时编译的语言，所以在写代码的时候很容易出现错误，这些错误只能在运行的时候才能够发现，并且难以确定具体的位置，这样就让开发的效率大大的降低。

而 ESLint 可以让我们在编写的代码的时候，就检查语法错误，提前发现 BUG，例如拼写错误。它还可以自定义代码规范，这样在团队合作开发的时候，写出风格统一、清晰的代码，使得代码更容易阅读和维护。