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

(1)使用CDN方式。

(2)使用NPM方式。

(3)使用命令行工具(Vue CLI)方式。

(4)使用Vite方式。

使用CDN方式

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

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

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

NPM

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

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

使用NPM安装Vue.js 3.x：

# 最新稳定版$ npm install vue@next

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

npm install -g cnpm --registry=https://registry.npm.taobao.org

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

cnpm install 模块名称

注意：通常在开发Vue.js 3.x的前端项目时，多数情况下会使用Vue CLI先搭建脚手架项目，此时会自动安装Vue的各个模块，不需要使用NPM单独安装Vue。

命令行工具(CLI)

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

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

图1 各自的组件和文件

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

<template>HTML</template><script>JavaScript</script><style scoped>CSS或者SCSS</style>

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

使用Vite方式

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器。在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。