2.3　創建一個Vue實例

使用HBuilder X編輯器可以創建Vue項目，還可以創建Vue實例。HBuilder X支持各種表達式語法，以及Script和Style支持的其他語言（如Less、CSS、TypeScript等），無須安裝插件。下面介紹創建簡單Vue實例的具體操作步驟。

（1）打開HBuilder X編輯器，單擊左上角的“文件”按鈕，在彈出的菜單中選擇“新建”命令，在右側彈出的子菜單中選擇“4.vue文件”，如圖2-10所示。

（2）選擇vue文件后，會出現一個彈出框，在彈出框中第一行輸入項目名稱，在第二行輸入保存文件的路徑，如圖2-11所示。輸入完成后，單擊“創建”按鈕即可。

（3）右擊新建的vueDemo項目，在彈出的快捷菜單中選擇“新建”→“html”文件，并在出現的彈出框中輸入文件名、文件保存路徑等，如圖2-12所示。

（4）創建index.html文件后，開始編寫代碼。代碼如下：

代碼編寫完成后，單擊HBuilder X編輯器中index.html頁面右上角的“預覽”按鈕，則會在右側“Web瀏覽器”窗格中輸出“Hello Vue!!!”，如圖2-13所示。

至此，已經成功創建了第一個Vue應用程序，看起來與渲染一個字符串模板非常類似，Vue在背后做了大量工作。現在數據和DOM已經被建立了關聯，所有部分都是響應式的。如果修改demo變量中message的值，相應的值也會在右側預覽框中進行更新。