首页 > 编程笔记

Vue环境搭建教程（基于VSCode）

工欲善其事，必先利其器，选择一个合适的开发工具，能显著地提高学习和开发效率。目前使用率比较高的前端开发工具有以下几种。

1) Visual Studio Code

Visual Studio Code 简称 VS Code，是微软在 2015 年发布的一款针对编写现代 Web 和云应用的跨平台源代码编辑器。

VS Code 功能非常强大，界面简洁明晰，操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown 的支持。

2) HBuilder

HBuilder 是国产的一款前端开发工具，而且是免费的，对于英语不好的前端工程师是一个很大的优势，是前端开发者的首选。

HBuilder 的优点是对其他语言的强大支持和开发 Web App 等功能，强大到“没朋友”。在语法提示、转到定义、重构、调试等方面都非常高效。

3) Sublime Text 3

Sublime Text 是一个轻量级的编辑器，也支持各种编程语言。Sublime Text 所有的功能都支持插件，而且快捷键十分好用，可以极大地减小开发工作的强度，使用 Sublime Text 就是要使用其快捷键和插件。

Sublime Text 3 的优点是轻量级且功能强大，优雅小巧且启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展。其缺点是不便于项目的管理等，而且代码提示不如 HBuilder 强大。

4) WebStorm

WebStorm 是 JetBrains 公司旗下的一款 JavaScript 开发工具，官方提供插件支持，满足许多不会配置的初学者，如 ESlint、词法高亮、emmet、CSS预处理器。

WebStorm 的新版本也添加了对 ES6 的支持，内建了服务器调试功能，目前已经被广大中国 JavaScript 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

WebStorm 与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JavaScript 部分的功能。

上面罗列的是目前比较常用的前端开发工具，当然还有很多其他的优秀开发工具，项目团队可以根据实际情况，选择最合适的开发工具。

本节介绍如何安装及配置Visual Studio Code 软件，并且使用它基于 Vue.js 快速开发猜数字游戏案例，体验 VS Code 工具的基本使用和基于 Vue.js 开发前端的基本流程。

安装配置开发环境

安装配置 VS Code 比较简单，主要步骤是下载并安装 VS Code 软件，再安装高效率的插件。为了方便测试，这里除了介绍 VS Code 的安装配置外，还会介绍在 Chrome 浏览器中如何安装 vue-devtools 插件，以便开发调试 Vue.js 项目。

1、安装配置VS Code

1) 下载VS Code安装软件

用浏览器打开 https://code.visualstudio.com/ 页面，单击 Download 按钮，进入下载页面，选择适合自己计算机环境的版本下载，如图 1 所示。


图 1 VS Code下载页面

这里选择的是 Windows 64 的 User Installer 版本，文件名称是 VSCodeUserSetup-x64-1.33.1.exe。

2) 安装VS Code

双击已下载的安装文件（VSCodeUserSetup-x64-1.33.1.exe），直接运行安装。安装过程比较简单，这里就不再介绍。

3) 安装Live Server插件

Live Server 插件能方便开发者实时浏览页面的显示效果，接下来介绍如何在 VS Code 中安装 Live Server 插件。

打开 VS Code 开发工具，如下图所示。


图 2 VS Code启动界面

单击图 2 左边的 Extensions 图标，或按快捷键 Ctrl+Shift+X，打开 VS Code 的 Extensions 窗口，在输入框中输入 Live Server，选中 Live Server 安装选项，如图 3 所示。


图 3 Live Server安装界面

再单击 Install 按钮，完成 Live Server 插件的安装。如果没有异常，并且在 Extensions 中的 Live Server 选项中没有 Install 按钮，则表明基本安装成功。

4) 安装Vetur插件

Vetur 是一个可以运行在 VS Code 中的插件，支持 .vue 文件的语法高亮显示，支持 template 模板，还支持大多数主流的前端开发脚本和插件，例如 Sass 和 TypeScript。接下来在 VS Code 中安装 Vetur 插件。

同安装 Live Server 插件一样，打开 VS Code 的 Extensions 窗口，在输入框中输入 Vetur，选中 Vetur 安装选项，单击 Install 按钮，即可完成 Vetur 插件的安装。

2、安装配置vue-devtools插件

vue-devtools 是一款运行在 Chrome 浏览器中的插件，能方便开发者开发和调试 Vue.js 应用。本节后面的案例会结合这个插件进行调试说明，同时在开发过程中，它也是一个很好的调试工具。接下来介绍 vue-devtools 插件的安装。

1) 下载vue-devtools插件源码

在浏览器中打开 https://github.com/vuejs/vue-devtools，选择 master 分支，单击 Code 按钮，然后在下拉菜单中单击 Download ZIP 选项，下载 vue-devtools 源码。这里下载的文件是 vue-devtools-dev.zip，下载界面如图 4 所示。


图 4 vue-devtools下载界面

2) 编译vue-devtools源码

第一步，解压 vue-devtools 源码压缩文件，打开一个 cmd 窗口，切换到 vue-devtools-master 解压目录。输入 npm install 命令，安装 vue-devtools 所需要的依赖，如图 5 所示。


图 5 安装依赖

第二步，用文本编辑器打开解压目录 vue-devtools-master 的 shells/Chrome/manifest.json 文件，将代码"persistent"：false改成"persistent"：true。

第三步，在解压目录下，运行 npm run build 命令，构建 vue-devtools 插件，结果如图 6 所示。


图 6 构建vue-devtools

第四步，打开 Chrome 浏览器，选择菜单“更多程序”→“扩展程序”，打开扩展程序界面，如图 7 所示。


图 7 扩展程序

单击“加载已解压的扩展程序”按钮，选择 vue-devtools-master/shells/Chrome 目录，将 vue-devtools 插件安装到 Chrome 浏览器，安装结果如图 8 所示。


图 8 vue-devtools安装结果

实现猜数字游戏

安装好了开发环境，接下来实现一个简单的猜数字游戏，验证开发环境是否搭建完整，同时快速体验 Vue.js 在前端页面中的使用。

1、功能说明

猜数字游戏的操作比较简单，在打开一个页面时会随机生成一个 1~10 的整数，并且显示页面，如图 9 所示。


图 9 猜数字游戏界面

玩家根据提示，在输入框中输入自己所猜的数字，单击“猜一猜”按钮，程序就会比较玩家输入的数字同页面随机生成的数字是否一样。如果玩家输入的数字比随机数字小，提示“你猜的数字太小，请往大的猜”；如果玩家输入的数字比随机数字大，则提示“你输入的数字太大，请往小的猜”。玩家按照提示，在页面上重新输入一个数字，再单击“猜一猜”按钮，程序继续比较和提示，直到玩家输入的数字等于随机生成的数字，此时页面提示“恭喜你猜中了，一共猜了N次”。

2、实现猜数字游戏

了解了猜数字游戏的大体功能后，接下来开始按步骤实现猜数字游戏。

1) 创建工作目录

在工作计算机上，创建一个空目录作为工作目录，这里是在 E:/work/code/vscodeworkspace 目录下，创建 vuebook 目录作为所有案例的工作目录。

2) 在工作目录下规划基本子目录

为了方便管理，在工作目录下分别创建 html 目录和 static/js 目录。html 目录用来存放本书案例中的所有 html 文件，static/js 目录用来存放本书案例用到的所有 JS 文件。

3) 用VS Code打开工作目录

打开 VS Code 编辑器，单击 VS Code 编辑器上的 File 菜单，选中前面创建的 vuebook 文件夹，如图 10 所示。


图 10 案例工作目录

4) 添加Vue.js文件

在 static/js 目录下，创建 Vue.js 文件。打开浏览器，打开 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 链接，将页面显示的内容全部复制到 Vue.js 文件中。

5) 创建猜数字游戏页面

在 html 目录下，创建猜数字游戏 .html 文件，代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <!-- 引入 Vue.js -->
    <script type="text/javascript" src="../static/js/Vue.js"></script>
</head>

<body>
    <div id="app">
        欢迎体验猜数字游戏<br />
        请输入你要猜的数字(1~10的整数)：<input type="text" v-model="guessNumber" />
        <input type="button" value="猜一猜" @click="guess">
        <div>
            {{message}}
        </div>
    </div>

    <script type="text/javascript">
        // 创建Vue.js对象
        const vm = new Vue({
            el: '#app',   // 绑定 app div
            data: {    // 定义 data 属性
                randomNumber: 0,
                guessNumber: "",
                times: 0,
                message: ""
            },
            created() {    // 定义创建函数，在创建 Vue.js 对象的时候自动执行
                let random = parseInt((Math.random() * 10000));
                this.randomNumber = random % 10 + 1;
            },
            methods: {    // 定义事件方法
                guess() {
                    this.times++;
                    this.guessNumber = parseInt(this.guessNumber);
                    if (this.guessNumber < this.randomNumber) {
                        this.message = '你输入的数字太小，请往大的猜！';
                    } else if (this.guessNumber > this.randomNumber) {
                        this.message = '你输入的数字太大，请往小的猜！';
                    } else {
                        this.message = "恭喜你猜中了！共猜了" + this.times + "次";
                    }
                }
            }
        });
    </script>
</body>

</html>

6) 运行游戏案例

右击 html/猜数字游戏.html 文件，在弹出的菜单中选中 Open with Live Server 选项，启动 Live Server，如图 11 所示，VS Code 会自动启动浏览器，进入猜数字游戏界面。


图 11 启动Live Server

7) 基于vue-devtools插件，查看Vue.js对象

在 Chrome 浏览器中，按 F12 键，单击 Vue 选项，再单击视图中的组件，这样就可以查看该组件对象的 data 数据了，如图 12 所示。


图 12 vue-devtools调试

推荐阅读