2.3　创建一个Vue实例

使用HBuilder X编辑器可以创建Vue项目，还可以创建Vue实例。HBuilder X支持各种表达式语法，以及Script和Style支持的其他语言（如Less、CSS、TypeScript等），无须安装插件。下面介绍创建简单Vue实例的具体操作步骤。

（1）打开HBuilder X编辑器，单击左上角的“文件”按钮，在弹出的菜单中选择“新建”命令，在右侧弹出的子菜单中选择“4.vue文件”，如图2-10所示。

图2-10　选择新建vue文件的命令

（2）选择vue文件后，会出现一个弹出框，在弹出框中第一行输入项目名称，在第二行输入保存文件的路径，如图2-11所示。输入完成后，单击“创建”按钮即可。

图2-11　“新建vue文件”弹出框

（3）右击新建的vueDemo项目，在弹出的快捷菜单中选择“新建”→“html”文件，并在出现的弹出框中输入文件名、文件保存路径等，如图2-12所示。

图2-12　“新建html文件”弹出框

（4）创建index.html文件后，开始编写代码。代码如下：

代码编写完成后，单击HBuilder X编辑器中index.html页面右上角的“预览”按钮，则会在右侧“Web浏览器”窗格中输出“Hello Vue!!!”，如图2-13所示。

图2-13　程序运行结果

至此，已经成功创建了第一个Vue应用程序，看起来与渲染一个字符串模板非常类似，Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有部分都是响应式的。如果修改demo变量中message的值，相应的值也会在右侧预览框中进行更新。