1.4.4　第一个完整版的Hello Vue示例

尝试Vue.js最简单的方法是使用Hello World例子。本节笔者通过一个简单的Hello Vue示例讲解Vue的入门用法。前面已经介绍过Vue的安装方法，通过Vue CLI和Vite都能轻松创建一个简单的Vue示例，但在不熟悉Vue的使用之前，笔者不建议通过这种方法来创建。下面来看第一个完整版Hello Vue示例【例1.1】的代码。

【例1.1】Hello Vue示例。

创建一个名为hello-vue.html的文件，并写入如下代码：

这段代码有3个重点：

（1）有一个ID为app的div元素用于初始化Vue（第10行）。

（2）在页面上引用CDN版本的Vue文件，或者下载到本地并引用。但出于简化的考虑，暂且按照第13行这样处理。

（3）运行一些JavaScript代码，通过全局暴露出来的Vue的createApp方法创建一个Vue实例，并将该实例挂载（mount）到之前提到的div元素上（第14～23行）。

最后直接用浏览器打开这个文件，就可以看到运行结果，页面中展示了Hello Vue字样，如图1.17所示。

图1.17　第一个示例Hello Vue结果演示

上述方式对于简单的页面很好用，但对于更加复杂的场景就不是那么友好了，如在大型项目中，需要使用类似Webpack这样的打包工具，使用ECMAScript 2015（甚至更高）标准的JavaScript语言，编写单文件组件、实现组件的相互引用等其他特性时，使用工程化管理项目就变得非常方便了。了解这些Vue的基本使用方法后，笔者建议读者参照前面介绍的Vue CLI或Vite安装方式创建Vue项目。