1. 课程介绍

  2. 开发工具

推荐 Visual Studio Code (简称 VSCode) 作为我们之后的开发工具。

VSCode 目前是最流行的编辑器,也是 Vue 的推荐编辑器

image

Vue 的作者尤雨溪也是使用的 VSCode。

image

下载安装

VSCode 是开源的、跨平台的、完全免费的。

我们可以直接打开 Visual Studio Code官网 选择相应的系统版本,即可下载安装。

插件安装

VSCode 不止可以用来开发前端,也同样支持很多其他场景的开发。这是因为 VSCode 的强大依赖于其插件生态。

因此刚开始使用 VSCode 开发时通常需要安装一些相关的插件,对于 Vue 的开发可以使用官方推荐的插件 Volar

还推荐安装一些前端常用的插件,具体可以参考我们出的一个 b 站视频:VS Code 网页前端开发的配置与插件

推荐插件

推荐配置

同步 HTML 标签修改

CTRL/CMD + , 调出配置界面,搜索 Linked Editing 后将其勾上。

括号匹配着色

CTRL/CMD + , 调出配置界面,搜索 Bracket Pair Colorization 后将其勾上。

保存自动格式化

CTRL/CMD + , 调出配置界面,搜索 Format On Save 后将其勾上。

快捷键

上手 VSCode

在 VSCode 中是将一个文件夹当作一个项目,通常的开发步骤是先创建一个项目文件夹,再用 VSCode 打开文件夹,最后在 VSCode 中编辑项目。

以下以开发一个 HTML 项目为例。

1. 创建项目文件夹

在电脑的任意位置创建一个文件夹,文件夹的名字会在 VSCode 中被作为项目名。

image

2. VSCode 打开文件夹

在 VSCode 中选择 File(文件) → Open Folder(打开文件夹) 来打开我们刚建立的文件夹。

image

3. 创建代码文件

在文件管理器 右键 → New File(新建文件) ,将文件命名为 index.html

image

打开文件输入以下代码, CTRL/CMD+S 保存。

<!DOCTYPE html>
<html>
    <body>
        <h1>三眼鸭的编程教室</h1>
    </body>
</html>

4. 运行项目

点击右下角的 Go LIve(需要装插件 Live Server)用浏览器打开网页。

image

运行结果:

image