跳到主要内容位置

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

张旭乾
软件工程师 / B站UP主

在开发 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 项目了。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

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

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买