![Vue.js跨平台开发基础教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/47684154/b_47684154.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.1.1 创建Vue实例
Vue项目通过Vue构造器创建Vue实例,使用Vue构造器必须引入Vue库,可以是开发模式库vue.js,也可以是生产模式库vue.min.js,本书引入开发模式库进行讲解。引入应用程序js文件夹下的库代码如下。
![](https://epubservercos.yuewen.com/A54F9F/27087636702045206/epubprivate/OEBPS/Images/20_02.jpg?sign=1738836510-wViqhjGEIzQo9xAQfNoGpywniP5IrZmC-0-008aad3d7034f89dad1ec8f0c002af16)
这段代码在本书开发环境中创建Vue项目时会自动添加,这里之所以特别强调是为了引起读者重视,提醒读者使用其他开发工具(例如VS Code)开发Vue项目时记得添加引用语句。事实上,简单Vue项目也可以仅创建HTML文件,在文件中加入库引用语句开发。
添加好引用后就可以使用Vue构造器创建Vue实例了,创建代码如下。
![](https://epubservercos.yuewen.com/A54F9F/27087636702045206/epubprivate/OEBPS/Images/20_03.jpg?sign=1738836510-xanNsw0lhDIR9p5bdBCZiuEtVByFJa4Y-0-b9a480a046fd1c6423a4cdf2202548d4)
![](https://epubservercos.yuewen.com/A54F9F/27087636702045206/epubprivate/OEBPS/Images/21_01.jpg?sign=1738836510-TOw2BrHHiayf7VP9r6oBwDsybNBpFqUX-0-f92f63f669cfda52430015801fbdf2a0)
![](https://epubservercos.yuewen.com/A54F9F/27087636702045206/epubprivate/OEBPS/Images/21_02.jpg?sign=1738836510-wGVDjmfBGtCYdophVb6hgzBxK2gTnaVi-0-bf80ad77739c1968ed62cb61ba6e548b)
图2-1 显示诗词
以上语句使用Vue构造器函数声明了一个名为vm的Vue实例,函数参数是一个匿名对象,该对象是一个选项集合,定义关联Vue实例的页面元素、页面使用的数据、方法等选项。使用“名值对”定义每一类选项,选项名与选项值之间用分号进行分隔,选项之间和选项内部元素之间均用逗号进行分隔,下面分别予以描述。