跳到主要内容位置

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

张旭乾

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

VS Code

VS Code 可以从官网下载:

https://code.visualstudio.com/

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

  • Volar,这个是开发 Vue 3.x 项目的主要插件,有代码高亮、提示和补全等功能。
  • Prettier,代码格式化工具,可以自动帮我们格式化 HTML、CSS、JS、Vue 等代码。安装完成之后,记得打开 VS Code 的首选项,检查一下 Save on format 是否开启了。
  • Eslint,JS 代码检测工具,可以帮助我们在写代码的时候就检查出错误和不规范的地方来,而不用在运行的时候才知道错误。
  • Live Server,可以直接把 HTML 文件运行在服务器上,并且能够根据代码的变化自动刷新浏览器,方便项目的开发。

这些插件配置完之后,就可以正式开发 Vue 项目了。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情