跳到主要内容位置

Vue4

查看所有标签(分类)

配置 Vite ESLint VSCode 语法检查教程

张旭乾

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

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

什么是 ESLint

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

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

如何在 Vite 2.0 项目中导入环境变量

张旭乾

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

Vite 2.0 创建的项目中,默认有下面 4 个默认的环境变量:

前端组件化开发的 7 条经验总结

张旭乾

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

前端组件化发展历史

在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』这个概念,更不用提组件化了。当时,网页只是作为可以在浏览器中浏览的富文本文件,开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言,网页中的代码没有办法复用,即使是类似的页面,都需要复制粘贴大量的重复代码:

Vite 配置代理 Proxy,避免跨域和重复编写url的问题

张旭乾

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

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。