前言

重点内容

• 多种引入 vue.js 的方式

多种引入 vue.js 的方式

离线

在电脑无法联网的情况下，可以先提前下载好 vue.js 文件，然后丢到项目中引用。

vue.js 文件有两个版本 「开发版本」、「生产版本」。

它们之间的区别：

• 开发版本：包含完整的警告和调试模式（文件体积相对较大，初学建议使用这个版本）
• 生产版本：删除了警告

如何下载 vue.js 文件？

详细操作流程，见视频 👉「链接」。

当我们成功引入 vue.js 文件之后，它会在全局暴露一个 Vue 构造函数，通过这个构造函数，我们就可以创建一个 vue 实例。

在线

通过 cdn 的方式来引入（推荐），使用这种方式要求设备能正常连网，好处在于不需要再去手动下载 vue.js 文件。

<!-- 开发版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 生产版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- es modules -->
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

在初学阶段直接通过 cdn 的方式引入开发版本即可。

<script src="[https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>](https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>)

也就是新建一个 .html 文件，然后将👆🏻这条语句丢到 .html文件中即可。

工程化

工程化的方式，是借助官方提供的 vue-cli 来创建 vue 工程，教程中没介绍。并且不建议初学者使用这种方式来安装 vue。

⚠️ 并不是说这种方式不重要，在实际开发中，都是通过工程化的方式来安装 vue 的。

但是，可能是由于它和 vue 的核心概念没有太大的关系，所以教程中没做介绍。并且，这也不是短短几分钟视频可以介绍清楚的。

（在本课程的最后一节「第15节 免终端开发 vue 应用」有对“工程化”的简单介绍）