1.3 项目开发准备

Vue是一种JavaScript框架，使用它要求学习者有一定的JavaScript、HTML和CSS技术基础。除此以外，我们还需要先了解与Vue应用开发相关的工具、开发环境的搭建，为学习开发Vue项目做好准备。

1.3.1 了解相关工具

与Vue应用开发相关的工具如下。

1. Vue库文件

Vue库文件是Vue框架的核心库文件。它包括模板语法、组件、数据绑定和响应式系统等内容，可以满足前端项目的基础功能开发需求。它的使用方法有3种，一是采用CDN（Content Delivery Network，内容分发网络）镜像服务器方式直接导入HTML文件；二是下载Vue库文件，将它作为本地资源在HTML代码中引入；三是以插件形式安装到前端项目中。Vue库文件的几种使用方法将在后续单元中结合项目案例来详细介绍。

2. Vue CLI

Vue CLI是一个用于快速构建Vue项目的工具。它包括CLI（Command-Line Interface，命令行界面）、CLI服务和CLI插件，其中CLI提供了Vue命令用于搭建项目；CLI服务基于webpack提供开发环境，用于项目启动、打包和加载CLI插件等处理工作；CLI插件则提供可选的包，如Babel/TypeScript转译、ESLint集成等，在创建项目时开发者可自行选用。Vue CLI工具的安装方法将在单元10中结合项目案例来详细介绍。

3. Node.js、npm和webpack

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O（Input/Output，输入输出）的模型。2009年，Ryan（瑞安）正式推出了基于JavaScript语言和Chrome V8引擎（Google的JavaScript引擎）的开源Web服务器项目，并将其命名为Node.js。可以说Node.js是JavaScript开发本地应用、服务器应用的一个套件。Node.js为我们使用npm和webpack工具（这两者都是构建Vue项目所必需的工具，而它们的使用又都依赖于Node.js）提供了支持。

（1）npm

npm是一个Node.js中用于集中管理包的工具。Node.js中已集成了该工具，无须单独安装。在实际开发中，我们经常需要引入第三方包。为了更新共享资源，npm官网提供了对于各种包的集中管理方法，开发者只要使用npm命令就可以很方便地进行包的安装、升级和卸载等操作。

npm的另一种用法是cnpm。由于使用npm安装的包来自国外网站，受网络的影响比较大，有时会出现下载异常，为此淘宝团队在国内架设了镜像服务器，可以代替官方版本（只读），目前同步频率为10分钟。

Node.js和cnpm的安装方法将在单元10中结合项目案例来详细介绍。

（2）webpack

webpack是一个JavaScript应用程序的静态模块打包器。Vue CLI底层使用的就是webpack，因此，webpack无须单独安装。当编写好项目的各模块代码后，可以使用webpack对它们进行编译并打包成对应的静态文件，之后就可以直接通过浏览器运行该项目了。webpack能够很好地管理、打包项目开发中所用到的HTML、CSS和JavaScript文件以及各种静态文件（图片、字体文件等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。

4. ES6

Vue应用开发采用了ES6编码规范。ES6（ECMAScript 6.0的缩写）是JavaScript语言的下一代标准，其目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6的新特性包括const和let命令、模板字符串、解构、for...of循环、展开运算符、ES6箭头函数、类的支持、模块等。目前，浏览器对ES6还没达到完全支持，实际开发中，可使用ES6语法转化器来加以解决。Vue CLI工具集成了Babel插件来实现语法转化。受篇幅限制，本书采用随用随讲的方式来介绍ES6编码规范的用法，并在附录中集中列出ES6的相关语法。

1.3.2 安装开发和调试工具

下面介绍如何安装开发和调试工具。

1. 代码编辑器

VS Code（Visual Studio Code）是Microsoft推出的一款用于编写现代Web应用和云应用的跨平台源码编辑器。它可用于Windows、macOS和Linux系统，具有对JavaScript、TypeScript和Node.js的内置支持，还具有丰富的其他语言和运行时扩展的生态系统。VS Code编辑器的特点是：轻巧极速，占用系统资源较少；具有语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能；支持跨平台操作；主题界面的设计比较人性化；提供了丰富的插件。

（1）VS Code的安装

进入VS Code的官网，开发者可以在下载页面中选择需要的版本进行下载，如图1-1所示。

下载完成后，执行.exe文件进行安装（安装操作很简单，只要按照提示进行即可）。安装完成后，打开VS Code可以看到图1-2所示的代码编辑界面。

（2）VS Code的扩展库

VS Code的流行得益于其丰富的扩展库，这些扩展库让第三方插件的安装和使用变得更加容易。常用的第三方插件如下。

➢ Vetur：支持Vue语法高亮、智能感知、Emmet等，还包含格式化功能等。

➢ HTML Snippets：支持HTML标签以及对标签含义的智能提示。

➢ JavaScript(ES6) code snippets：支持ES6语法智能提示。

➢ open in browser：支持使用快捷键与鼠标右键在浏览器中打开HTML文件，以及指定浏览器（包括Firefox、Chrome、Opera、IE以及Safari）。

➢ Live Server：可以用于开启静态资源服务器，使得静态HTML文件可运行对外服务；还可以用于配置代理。

➢ Element UI Snippets：支持Element UI语法智能提示。

第三方插件的安装流程是：单击编辑器窗口左侧的Extensions图标按钮 ，打开第三方插件的搜索框。在搜索框中输入插件名称，单击“Install”按钮即可进行安装，如图1-3所示。安装完成后可在窗口右侧看到当前插件已处于可使用的状态。读者可以根据自己的需要安装其他插件。

2. 调试工具DevTools

DevTools是Web应用程序的测试工具，它提供了很多调试功能，能够很好地帮助开发者解决定位问题。DevTools对不同的人员有着不同的用途，前端开发人员可用它进行开发预览、远程调试、性能调优、bug跟踪、断点调试等工作；后端开发人员可用它进行网络抓包、开发调试等工作；而测试人员则可用它检查服务器端API（Application Program Interface，应用程序接口）数据是否正确、审查页面元素样式及布局、进行页面加载性能分析，以及进行自动化测试。

我们以Chrome浏览器为例讲解DevTools工具的使用方法。首先打开该工具，可以通过在Chrome浏览器右上角的“自定义及控制”下拉菜单中选择“更多工具”->“开发者工具”打开，也可以通过在页面元素上单击鼠标右键，在弹出的快捷菜单中选择“检查”或者按“Ctrl + Shift + I”组合键来打开。DevTools工具中共有8个功能面板，其中常用于调试的是Elements（元素）面板、Console（控制台）面板、Sources（源代码）面板和Network（网络）面板。

（1）Elements面板

Elements面板主要用于检查和实时编辑页面的HTML与CSS代码。

① 定位DOM元素

当我们将鼠标指针移至某个DOM元素上时，网页中对应的区域也会随之被锁定。鼠标指针移至div上的效果如图1-4所示。

另一种定位DOM元素的方式是，按“Ctrl+F”组合键打开搜索框，在其中输入查询关键词，如“女装”，就可以快速定位到对应的DOM元素，如图1-5所示。

② 编辑DOM元素

对于选中的DOM元素，单击鼠标右键，利用弹出的快捷菜单中的命令可以进行编辑操作，包括增加DOM元素的属性、删除被选中的DOM元素、编辑DOM元素等，在退出编辑状态后，页面会实时更新。删除DOM元素的效果如图1-6所示。

③ 查看CSS设置

在Styles子面板下，可以查看当前选中DOM元素的CSS设置。当多个样式叠加时，样式按优先级从高到低显示，若被优先级更高的样式覆盖则当前样式的名称会带删除线，如图1-7所示。单击右侧链接可跳转到Sources面板对应的代码位置，如图1-8所示。

（2）Console面板

我们可在Console面板中输入JavaScript代码，通过交互式编程来进行调试；也可以查看当前程序运行日志信息。如图1-9所示，在Console面板中输入了4条JavaScript语句，这4条JavaScript语句分别用于输出“hello”字符串、定义和显示arr数组，以及输出当前程序中变量app的值。

（3）Sources面板

我们可以在Sources面板中查看源码以及进行断点调试。单击源码指定行左侧即可设置断点，如图1-10所示，程序再次运行时，将会在该处暂停。根据需要单击方框内的按钮，这5个按钮的作用依次为暂停/恢复脚本的执行、执行下一语句、进入当前函数、跳出当前函数和单步执行。另外，还可以将鼠标指针移到某个变量上，查看该变量当前的值。

（4）Network面板

我们可以在Network面板中查看网页资源请求处理情况。如图1-11所示，在Network面板中可以查看请求数据、响应数据及相关信息，还可以分析网页载入性能指标等。

3. 调试工具Vue Devtools

（1）安装流程

Vue Devtools是一款基于浏览器的插件，主要用于调试Vue应用程序。下面以Chrome浏览器为例介绍它的安装过程。首先，在GitHub上查找并下载安装包vue3_dev_tools.crx，然后在Chrome浏览器右上角的“自定义及控制”下拉菜单中选择“更多工具”->“扩展程序”进入扩展程序管理界面。把安装包文件拖入该界面，当看到浏览器提示“要添加Vue.js devtools吗？”时，单击“添加扩展程序”按钮即可安装该插件。单击浏览器地址栏右边的扩展程序按钮，可看到带Vue标志的“Vue.js devtools”选项，如图1-12所示，表示已安装成功。

（2）使用方法

我们可以通过在浏览器右上角的“自定义及控制”下拉菜单中选择“更多工具”->“开发者工具”进入DevTools界面，单击“Vue”打开Vue面板，如图1-13所示。在Vue面板中，我们可以看到Vue应用程序的组件树结构（右上方方框处）以及数据（右下方方框处），单击某个组件所在标签，右下方将显示该组件对应的数据，单击数据旁编辑按钮 可以修改该数据，修改后保存，则左侧页面效果将会同步更新。