2.2　环境搭建和Hello World

引入网页的代码如下：

开发环境和生产环节的区别如下。

（1）开发环境：指程序员在公司进行开发过程中使用的依赖包，开发环境统称development环境，简称dev环境。开发环境使用的依赖包中包含了更多的错误提示、语法检测，以及代码规范警告等功能。

（2）生产环境：指当项目上线，在互联网运行项目时使用的依赖包，生产环境统称为production环境，简称prod环境。在生产环境中依赖包会去掉所有的调试功能来精简包的体积，避免调试信息泄漏，也会使依赖包加载速度更快更安全。

用Vue实现一个Hello World网页。

首先打开计算机上的代码编辑器，在其中新建一个名为hello-vue.html的文件。将下面的代码粘贴到代码编辑器中并且详细地阅读代码的注释。

阅读注释后使用浏览器运行已经粘贴好的代码并且查看浏览器中展示的内容。运行效果如图2-1所示。

图2-1　运行hello-vue.html的效果图

这样第1个Hello World网页就运行起来了，这里可以直观地看到，只有放在id为app的元素内部的内容才能正确地被Vue框架识别并渲染到页面上，其他地方编写的取值表达式是无法正确渲染的。

在Hello World案例中的div元素代表Vue框架的有效渲染区域，只有在这个元素内部编写的代码才能被Vue框架正确地解析，引入了Vue的开发环境依赖包之后全局作用域下就会自动地生成一个名为Vue的对象，第2个script标签中编写的new Vue（）代表实例化Vue的全局对象，new Vue（）.$mount（'#app'）使用了CSS的选择器方式，代表当前的Vue对象会将数据渲染到id为app的元素内部，data是Vue中声明视图使用的数据的对象，它应该以函数的形式存在，并且通过return返回一个JSON对象，这样JSON对象内部的属性就可以通过{{}}表达式在指定渲染的DOM区域将属性的值渲染到页面中，所以最终页面上会出现"Hello World！This is my first Vue page！"，代表Hello World运行成功。