Vue.js的安装和导入

对于刚开始使用 Vue.js 的读者，可以采用最简单、最原始的方式来安装或者导入 Vue.js。当然，也可以通过 npm 工具来安装或导入 Vue.js。

通过<script>标签导入

与大多数的前端框架库一样，在 HTML 页面中，可以通过 <script> 标签的方式导入 Vue.js，这里我们引入 Vue 3，如示例代码1-3-1所示。

示例代码1-3-1导入 Vue.js

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

当然，可以将这个链接指向的 JavaScript 文件下载到本地计算机中，再从本地计算机导入。需要说明的是，Vue.js 3 有多个版本，例如 Vue.js 3.0.0、Vue.js 3.1.0 等，同时也在不断更新中，通过上面配置的链接可以获取到最新的 Vue 3 版本。当然，如果想固定使用某个版本，也可以将链接修改为 https://unpkg.com/vue@3.2.28/dist/vue.global.prod.js ，本书中与 Vue.js 相关的内容都基于 3.2.28 版本。

通过npm导入

在使用 Vue.js 开发大型项目时，推荐使用 npm 工具来安装 Vue.js。npm 可以很好地和诸如 Webpack 或 Rollup 等模块打包工具配合使用，如示例代码1-3-2所示。

示例代码1-3-2　使用 npm 安装 Vue.js

npm install vue@next

通过Vue Cli和Vite导入

对于真实的生产项目而言，笔者更推荐采用 Vue Cli 或者 Vite 的方式来创建 Vue 项目，这更符合前端工程化的思想。

Vue Cli 是一个官方的脚手架工具，基于 Webpack，提供页面应用的快速搭建，并为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来，并带有热重载、保存时 lint 校验以及生产环境可用的构建版本。

Vite 是一个 Web 开发构建工具，基于 Rollup，伴随着 Vue 3 而来，由于其原生的 ES 6 模块导入方式，可以实现闪电般的冷服务器启动。我们将会在后面的章节深入讲解这两个工具的使用。