2.1　安装Vue.js

Vue.js的安装有4种方式：

（1）使用CDN方式。

（2）使用NPM方式。

（3）使用命令行工具（Vue Cli）方式。

（4）使用Vite方式。

2.1.1　使用CDN方式

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络堵塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

使用CDN方式来安装Vue框架，就是选择一个提供稳定Vue.js链接的CDN服务商。选择好CDN后，在页面中引入Vue的代码如下：

2.1.2　NPM

NPM是一个Node.js包管理和分发工具，也是整个Node.js社区最流行、支持第三方模块最多的包管理器。在安装Node.js环境时，安装包中包含NPM，如果安装了Node.js，则不需要再安装NPM。

用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。

使用NPM安装Vue 3.0：

由于国内访问国外的服务器非常慢，而NPM的官方镜像就是国外的服务器，为了节省安装时间，推荐使用淘宝NPM镜像CNPM，在命令提示符窗口中输入下面的命令并执行：

以后可以直接使用cnpm命令安装模块。代码如下：

2.1.3　命令行工具（CLI）

Vue提供了一个官方的脚手架（Vue CLI），使用它可以快速搭建一个应用。搭建的应用只需要几分钟的时间就可以运行起来，并带有热重载、保存时lint校验，以及生产环境可用的构建版本。

例如想构建一个大型的应用，可能需要将东西分割成各自的组件和文件，如图2-1所示，此时便可以使用Vue CLI快速初始化工程。

因为初始化的工程，可以使用Vue的单文件组件，它包含了各自的HTML、JavaScript以及带作用域的CSS或者SCSS，格式如下：

Vue CLI工具假定用户对Node.js和相关构建工具有一定程度的了解。如果是初学者，建议先在熟悉Vue本身之后再使用Vue CLI工具。本书后面章节，将具体介绍脚手架的安装以及如何快速创建一个项目。

2.1.4　使用Vite方式

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器。在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。本书后面章节，将具体介绍Vite的使用方法。 TtjVvELfxCQb2f8RXpZeRuwxbJ2ysdBypIMIsC1vt/0aCExoZUwP/ru2+u1iMSDT