购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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所示。

图1-1 VS Code官网下载页面

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

图1-2 VS Code的代码编辑界面

(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所示。安装完成后可在窗口右侧看到当前插件已处于可使用的状态。读者可以根据自己的需要安装其他插件。

图1-3 VS Code安装第三方插件

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所示。

图1-4 鼠标指针移至div上,定位内容为阴影区域

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

图1-5 定位指定的DOM元素

② 编辑DOM元素

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

图1-6 “女装/内衣/外套”元素被删除

③ 查看CSS设置

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

图1-7 Styles子面板中显示的CSS样式列表

图1-8 与Styles子面板中样式对应的Sources面板中的代码

(2)Console面板

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

图1-9 Console面板中的交互式编程

(3)Sources面板

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

图1-10 Sources面板中设置调试断点

(4)Network面板

我们可以在Network面板中查看网页资源请求处理情况。如图1-11所示,在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所示,表示已安装成功。

图1-12 在Chrome浏览器上安装Vue Devtools

(2)使用方法

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

图1-13 使用Vue Devtools工具Vue面板 LUPAgz8qeP/a56tqccv9jcYE8dckBe6YG9naJjAVhkwiHx/uuN3vghuVDXwCsVo0

点击中间区域
呼出菜单
上一章
目录
下一章
×