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項目。