1.5 第一个Vue.js程序
【例1.1】第一个Vue.js程序。（实例位置：资源包\TM\sl\1\01）
创建第一个Vue.js程序，在WebStorm工具中编写代码，在页面中输出“I like Vue.js”。具体步骤如下。
（1）启动WebStorm，如果还未创建过任何项目，会弹出如图1.14所示的欢迎界面。
图1.14 WebStorm欢迎界面
（2）选择图1.14中的New Project选项，弹出创建新项目对话框，如图1.15所示。在该对话框中选择项目存储路径，并输入项目名称sl，将项目文件夹存储在计算机的E盘中，然后单击Create按钮创建项目。
图1.15 创建新项目对话框
（3）在项目名称sl上右击，然后依次选择New→Directory选项，如图1.16所示。
图1.16 在项目中创建目录
（4）选择Directory选项，弹出新建目录对话框，如图1.17所示，在文本框中输入新建目录的名称1作为本章实例文件夹，然后按Enter键，完成文件夹的创建。
图1.17 输入新建目录名称
（5）按照同样的方法，在文件夹1下创建第一个实例文件夹01。
（6）在第一个实例文件夹01上右击，然后依次选择New→HTML File选项，如图1.18所示。
图1.18 在文件夹下创建HTML文件
（7）选择HTML File选项，弹出新建HTML文件对话框，如图1.19所示，在文本框中输入新建文件的名称index，然后按Enter键，完成index.html文件的创建。此时，开发工具会自动打开刚刚创建的文件，结果如图1.20所示。
图1.19 新建HTML文件对话框
图1.20 打开新创建的文件
（8）接下来，就可以构建一个简单的Vue.js程序。Vue的起步非常简单，安装Vue.js之后，使用Vue.createApp创建一个应用程序实例。在创建实例时会调用data()函数，该函数会返回一个数据对象，最后通过mount()方法指定一个DOM元素作为装载应用程序实例的根组件，实现数据的双向绑定，具体代码如下：
使用浏览器运行“E:\TM\sl\1\01”目录下的index.html文件，在浏览器中将会看到运行结果，如图1.21所示。
图1.21 程序运行结果