2.3　創(chuàng)建一個(gè)Vue實(shí)例

使用HBuilder X編輯器可以創(chuàng)建Vue項(xiàng)目，還可以創(chuàng)建Vue實(shí)例。HBuilder X支持各種表達(dá)式語(yǔ)法，以及Script和Style支持的其他語(yǔ)言（如Less、CSS、TypeScript等），無(wú)須安裝插件。下面介紹創(chuàng)建簡(jiǎn)單Vue實(shí)例的具體操作步驟。

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

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

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

（4）創(chuàng)建index.html文件后，開(kāi)始編寫(xiě)代碼。代碼如下：

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

至此，已經(jīng)成功創(chuàng)建了第一個(gè)Vue應(yīng)用程序，看起來(lái)與渲染一個(gè)字符串模板非常類(lèi)似，Vue在背后做了大量工作。現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)，所有部分都是響應(yīng)式的。如果修改demo變量中message的值，相應(yīng)的值也會(huì)在右側(cè)預(yù)覽框中進(jìn)行更新。