1.4　安装Vue.js 3.x

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

（1）使用CDN方式。

（2）使用NPM方式。

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

（4）使用Vite方式。

1.4.1　使用CDN方式

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

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

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

1.4.2　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@latest

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

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

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

     cnpm install 模块名称

1.4.3　命令行工具

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

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

图1-4　各自的组件和文件

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

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

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

1.4.4　使用Vite方式

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