对于开发和学习任何新技术、新框架，最重要的是它能运行，如何运行才是最重要的。所以，我们来说说Vue.js的安装方法

因为Vue.js最初被设计为一个渐进式的JavaScript框架，所以你可以按需使用它，这使得它可以以多种方式集成到一个项目中。

当前文档的最新版本为:3.2.12至3.2.13

这里的文档尽量用这个版本，没有大的版本变化，所以内容不会更新。本来是用3.2.12来写这篇文章的，但是在写这篇文章的过程中，已经升级到了3.2.13，本教程也同步升级到了3.2.13。

在应用中使用Vue.js一般有四种方式(三种方式或五种方式):

在页面上使用 CDN 包的形式导入下载 Vue.js 的 JavaScript 文件引用使用使用 npm 安装它使用官方的 CLI 来构建应用， 这个是现在前端工作流程中使用最多的方式。

接下来详细解释这些方式。

使用 Vite 构建工具， 进行构建应用

1.在页面上以CDN包的形式导入

在WEB开发初期，我们总是需要将相应的JavaScript文件直接引入html页面。Vue.js是一个渐进式的框架，所以这种方式也可以用:

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

介绍的代码如下图，界面效果代码截图。所有的代码都会放入github。

通过执行这个文件，您可以看到这一点。我们引用了三个文件:vue @ next，vue @ 3.2.12，vue.global.js。

效果图如下:

在实际生产环境中，最好指定相应的具体版本信息，避免版本升级遇到的一些问题和bug。

指定版本的方法是:

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

指定版本的引入只会引入文件本身。以后需要用到的文件，需要自己单独引用。所以这种方法是通过全局引用引入的。

2.下载Vue.js的JavaScript文件，参考一下。

第二种方法和第一种其实是一种方式。一种是别人帮我们建，我们直接用。另一种是我们下载需要的参考文件进行本地参考。在使用方式上是一致的。

有两个下载地址:

https://cdn.jsdelivr.net/npm/vue@next/dist/https://unpkg.com/browse/vue@3.2.12/dist/

我会把这个文件下载备份到github，可以查一下最后一个github地址做参考。也可以继续浏览教程。到第三步，使用npm直接安装文件，然后npm build tool会直接把所有需要的文件下载到本地。

Vue.js的目录结构，如图:

鉴于上面这么多文件，我们应该如何在其中选择JavaScript文件作为参考呢？我们会分几种不同的情况来解释。

*prod.js和*。js有prod版本作为生产环境，代码是压缩的。不拍的是开发版，开发会有详细的提示信息。

使用CDN或不使用构建工具。

vue(。运行时)。全局(。prod)。射流研究…

若要通过浏览器中的 <script src=”…”> 直接使用，使用过程中就需要暴露 Vue 全局。浏览器内模板编译：vue.global.js 是包含编译器和运行时的“完整”构建版本，因此它支持动态编译模板。vue.runtime.global.js 只包含运行时，并且需要在构建步骤期间预编译模板。内联所有 Vue 核心内部包——即：它是一个单独的文件，不依赖于其他文件。这意味着你必须导入此文件和此文件中的所有内容，以确保获得相同的代码实例。包含硬编码的 prod/dev 分支，并且 prod 构建版本是预先压缩过的。将 *.prod.js 文件用于生产环境。

如果不使用UMD(Universal Module Definition)模块化规范构建项目，如果使用IIFES(Immediate-Invoked Function Expressions)构建函数(自执行匿名函数)，可以直接引用JavaScript文件。

vue(。运行时)。e***浏览器(。prod)。射流研究…

用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type=”module”> 来使用)。与全局构建版本共享相同的运行时编译、依赖内联和硬编码的 prod/dev 行为。

使用构建工具

vue(。运行时)。e***-bundler.js

用于 webpack，rollup 和 parcel 等构建工具。留下 prod/dev 分支的 process.env.NODE_ENV 守卫语句 (必须由构建工具替换)。不提供压缩版本 (打包后与其余代码一起压缩)。import 依赖 (例如：@vue/runtime-core，@vue/runtime-compiler)导入的依赖项也是 e*** bundler 构建版本，并将依次导入其依赖项 (例如：@vue/runtime-core imports @vue/reactivity)。这意味着你可以单独安装/导入这些依赖，而不会导致这些依赖项的不同实例，但你必须确保它们都为同一版本。浏览器内模板编译：vue.runtime.e***-bundler.js (默认) 仅运行时，并要求所有模板都要预先编译。这是构建工具的默认入口 (通过 package.json 中的 module 字段)，因为在使用构建工具时，模板通常是预先编译的 (例如：在 *.vue 文件中)。vue.e***-bundler.js 包含运行时编译器。如果你使用了一个构建工具，但仍然想要运行时的模板编译 (例如，DOM 内 模板或通过内联 JavaScript 字符串的模板)，请使用这个文件。你需要配置你的构建工具，将 vue 设置为这个文件。

使用服务器端呈现方法

vue.cjs(。prod)。射流研究…

通过 require() 在 Node.js 服务器端渲染使用。如果你将应用程序与带有 target: ‘node’ 的 webpack 打包在一起，并正确地将 vue 外部化，则将加载此文件。dev/prod 文件是预构建的，但是会根据 process.env.NODE_ENV 自动加载相应的文件。

来自官网的简单介绍，具体细节会用在下面，我们一起体验，发现不同。我们继续。

您可以通过本地引用直接修改引用地址:

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

在页面上创建一个新的目录vuejs。然后参考地址，后跟:

<script src="vuejs/vue.global.js"></script>

因为这里下载的是固定版本，所以不需要指定版本。

截图是:

效果图如下:

3.使用npm构建安装方法

首先需要安装Node.js，可以使用npm指令。当然也可以使用纱线。而在使用Vue.js构建大型应用时，建议安装npm。应当指出的是，国家预防机制在国内的使用将会特别缓慢。你可以使用国内资源来加速它，或者建立你自己的npm服务器。

使用节点–和版本npm & # 8211版本检查是否安装并确保更新的版本。

然后您可以使用npm install命令来安装它。

npm install vue@next

–保存当前项目是否有效。如果不添加，默认全局生效。

从这里可以看出，npm构建工具已经将我们需要的所有相关依赖项下载到了当前目录。

Vue还为编写单文件组件提供了支持工具。如果您想使用单个文件组件，那么您还需要安装@vue/compiler-sfc:

npm install -D @vue/compiler-sfc

除了@vue/compiler-sfc，您还需要为所选的打包工具选择一个匹配的单文件组件加载器或插件。

在大多数情况下，我们更喜欢使用基于webpack的Vue CLI构建工具来创建一个最小化的Vue.js应用程序。

4.使用CLI工具构建应用程序。

CLI:命令行界面命令行界面，通常是通过应用程序的内部接口，来实现一些不需要操作界面就可以完成的工作。

对于Vue3，这里使用的是最新版本的Vue-CLI V4.5，命令改为:@vue/cli。最新版本安装如下:

yarn global add @vue/clinpm install -g @vue/cli

npm模式

纱线模式:

如果需要升级到当前项目的最新版本，可以使用命令vue upgrade & # 8211接下来升级，大版本不建议升级。如果需要迁移大版本，建议参考迁移指南。

接下来，您可以使用Vue/CLI来构建应用程序。

创建hello world应用程序

vue create hello-world

是Vue2的默认版本，可以切换到Vue3的版本。然后点击回车。

进入hello-world的工作目录。

cd hello-world

以npm运行开始项目。

npm run serve

打开浏览器，使用http://localhost:8080进行访问，查看效果:

5.用Vite构建Vue应用程序

Vite是一款web开发构建工具，由于其原生的ES模块导入方式，可以实现闪电般的冷服务器启动。和快速热部署。

在终端命令中输入一个命令，就可以使用Vite构建一个Vue项目。

使用npm init创建应用程序

npm 6.x和7.x有区别。

npm 6.x

npm init vite@latest <project-name> --template vue

npm 7+，需要加额外的双短横线

npm init vite@latest <project-name> -- --template vue

然后进入项目目录，特别尴尬。大Boss居然在凌晨三点提交了Vue.js的3.2.13版本，导致npm install一直提示找不到相应信息。不怕技术力的，就怕技术力还在打。之所以找不到，是因为***的存在有一定的延迟，没有办法及时更新npm依赖。解决办法是暂时关闭***或者加速，用官方源码安装就好了。

cd <project-name> npm installnpm run dev

打开浏览器查看效果:

用纱线创建项目

yarn create vite <project-name> --template vue

cd <project-name>yarnyarn dev

浏览器效果同上， 不在截图。cd & lt项目名称& gtYarnyarn dev浏览器效果同上，截图中没有。

用pnpm创建一个项目

pnpm dlx create-vite <project-name> --template vue

cd <project-name>pnpm installpnpm run dev

浏览器查看效果和第一个效果一致， 不再截图。cd & lt项目名称& gtpnpm installpnpm run dev浏览器的查看效果和第一个一样，就不截图了。

pnpm

Pnpm是一种新的构造方法，类似于***ven，相对独立地存储所有的依赖文件。这样做的好处是，当您的依赖项重复时，它们将不会在各自的应用程序中重复，从而节省磁盘空和安装速度。使用npm install -g pnpm来安装和使用。详情请见
https://***.pnpm.cn/installation。

已经描述了多种使用模式，后续实际使用过程中还需要详细描述很多详细的知识点。