跳到主要内容位置

如何使用 <script> 引入 Vue 3.x 框架

张旭乾
软件工程师 / B站UP主

在了解到 Vue 能够解决的众多问题之后,你是不是已经开始跃跃欲试了呢?那么这节课我们就看一下如何在项目中引入 Vue。引入 Vue 的方式大体有两种:

  • 使用 <script/> 标签。
  • 使用脚手架。

使用脚手架是比较高级的用法,这个我们在讲完组件之后再来看它怎么使用。

使用 script 标签

使用 <script/>标签的方式就和引入普通 JavaScript 文件一样。Vue 提供了 CDN 可以在线引入,也可以下载下来放到本地引入。使用 CDN 引入就直接在 script 标签的 src 属性写上 Vue JS 文件的 url:

<script src="https://unpkg.com/vue@3"></script>

如果想要下载到本地,那么可以直接打开 CDN URL,它会显示 Vue JS 的源代码,把它另存为 .js 结尾的文件就可以了。下载到本地可以避免网络不稳定的情况。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买