1.2.3 创建与调试Vue项目
1.创建Vue项目
在HBuilderX开发环境中，选择“文件”→“新建”→“项目”菜单命令，打开“新建项目”对话框，如图1-3所示，选择项目的模板“vue项目（普通模式）”，单击“浏览”按钮，选择项目的存放路径，输入项目名称“Hello”，单击“创建”按钮完成项目创建。
1-1 Vue项目创建步骤
图1-3 创建基本Vue项目
2.编辑Vue项目
项目创建完毕自动生成Vue项目结构和首页，如图1-4所示。左侧为项目结构窗口，中间为编辑窗口，右侧的“Web浏览器”选项卡为运行调试窗口。
1-2 HBuilderX开发环境介绍
Vue项目自动创建了三个文件夹和一个HTML文件，文件夹存放对应类型的文件。css文件夹存放项目使用的样式文件；img文件夹存放项目使用的图像；js文件夹存放项目使用的脚本文件，自动加载了vue.js和vue.min.js文件。vue.js是开发模式的Vue库。vue.min.js是生产模式的Vue库。生产模式的Vue库进行了优化，文件更小，生成的项目占用的存储空间也更小，更为优化，但是，生产模式的Vue库阅读不方便，在开发过程中建议使用开发模式Vue库。系统自动创建的HTML文件自动引入的也是开发模式Vue库，参见图1-4第6行代码。
图1-4 Vue项目工作窗口
index.html是静态网页文件，选中后在中间的编辑窗口显示其内容，并可以对其进行编辑，编辑以后必须手动保存才能在右侧运行调试窗口的“Web浏览器”中预览编辑的效果。
3.创建其他文件
HBuilderX编辑器创建文件非常方便，选择“文件”→“新建”菜单命令后，选择文件类型和保存位置即可创建，也可以在项目指定位置右击并在快捷菜单中选择文件类型创建，后者更为简便。
4.运行Vue项目
Vue项目编辑完毕通过浏览器进行运行，第一次单击工具栏最右侧的“预览”图标，会提示安装内置浏览器插件，若选择自动安装，安装完毕自动打开Web浏览器窗口。浏览器默认为“PC模式”，也可以选择“手机模式”，单击“PC模式”下拉列表框右侧的下拉按钮，选择手机的型号，完成手机模式选择。
也可以使用真实浏览器运行项目，方法为选择“运行”→“运行到浏览器”菜单命令，选择可用的浏览器，如Chrome。
5.调试Vue项目
在模拟运行环境，可以通过控制台调试Vue项目，选择“视图”→“显示控制台”菜单命令，打开控制台，在控制台交互输入数据调试程序。
也可以在真实浏览器中右击后在快捷菜单中选择“检查”→“控制台”菜单命令，交互调试程序，本书模块2中会使用真实浏览器的控制台调试程序。
【任务实现】
1）创建名为Hello的Vue项目。
2）在自动打开的HTML文件中编写代码如下，代码含义将在模块2的例2-1中详细说明。
3）保存HTML文件，运行测试项目。