- Vue.js 3.x+Element Plus前端开发实战
- 趣千厘编著
- 557字
- 2025-02-17 19:05:44
1.4.1 在不安装Vue的情况下引入Vue
在不安装Vue的情况下也可以使用Vue,类似于写一个简单的页面,在既有项目中,也可以通过这种方式使用Vue。这是一种可以快速使用Vue的方法,在学习Vue的基础知识时是非常方便的。
这种方式也很简单,因为Vue是一个轻量级的JavaScript框架,它的文件很小,所以可以在页面中通过<script>标签直接引入,可以引入CDN地址提供的文件,也可以从CDN下载文件到本地,然后通过<script>标签引入,如下所示:

上面引入的是unpkg CDN地址,unpkg是前端开发经常使用的CDN库,其内容均来自npm。这里引入Vue 3的版本是@next,由于Vue 3是当前next指向的版本,因此这么引入是没有问题的,但是因为next版本会随着版本的变更指向下一个更新的版本文件,所以笔者建议在实际开发过程中引入指定版本号的Vue 3文件代替@next,例如笔者写此书时,对应的Vue 3版本号是vue@3.2.24,可以按照下面的方式引入:

在unpkg CDN上对应版本的dist文件目录下有不同的Vue.js构建版本,如图1.5所示,开发者可以根据不同的情况选用不同的构建版本(对于构建版本的说明,感兴趣的读者可以查阅官网)。

图1.5 unpkg Vue.js版本号3.2.24 dist目录下的构建版本
可以看到笔者引入的3.2.24版本的dist目录下的vue.global.js文件,这个文件是Vue.js的完整版本,文件比较大,如果是在生产环境,为使文件变小,加快网站响应速度,应该引入vue.global.prod.js文件。这种通过script标签引入Vue文件的方式,会在全局中暴露出Vue对象,可以通过Vue对象使用其下所有的属性和方法。