对于开发和学习任何一门新技术， 新框架， 最主要的还是能够运行起来， 怎么运行起来，这才是最主要的。所以， 我们来说一下 Vue.js 的安装方式。

因为 Vue.js 的设计初始，就是一个渐进式的 JavaScript 框架，所以你可以按需所用，这也就造就了他可以使用多种方式集成到一个项目中。

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

这里尽量在文档中使用的都是该版本， 没有大版本变化， 不再对内容进行更新。 本来使用 3.2.12 编写本次文章，但在本文章编写的过程中， 已经升级到 3.2.13， 本次教程也同步升级到 3.2.13

在应用使用 Vue.js 中一般有4种方式（也可以说是三种方式， 也可以说是五种方式）：

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

接下来详细的讲解这几种方式。

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

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

在一开始 WEB 开发的过程中， 我们总是需要在 html 页面中直接引入对应的 JavaScript 文件。 Vue.js 是一个渐进式的框架， 所以这种方式也可以使用：

引入的代码如下所示， 为了界面效果代码进行了截图。所有的代码都会放到 github 中。

执行该文件可以看到这种方式我们引用了vue@next, vue@3.2.12, vue.global.js这三个文件。

效果图如下：

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

指定版本的方式为：

对于指定版本的引入只会引入该文件自己。后续需要用到的文件将需要自己单独引用。所以对于这种方式使用全局的引用方式进行引入。

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 构建工具会直接下载所有需要的文件到本地。

Vue.js 目录结构，如图：

针对以上的文件这么多， 我们应该怎么选择其中的 JavaScript 文件进行引用呢？我们分为几种不同的情况进行说明。

*prod.js 和 *.js 带有 prod 为生产环境的版本， 进行了代码压缩。不带的就是开发版本， 针对开发会有详细的提示信息。

使用 CDN 或没有构建工具

vue(.runtime).global(.prod).js

• 若要通过浏览器中的

  在页面上新建了一个目录vuejs. 然后引用地址之后为：

  因为这里下载的就是固定的版本， 就不需要进行版本的指定了。

  代码截图为：

  效果图如下：

  3. 使用 npm 构建安装的方式

  首先你需要先安装 Node.js, 并且可以使用 npm 指令。当然也可以使用 yarn。并且使用 Vue.js 构建大型应用时推荐使用 npm 安装的方式。需要注意的是， 国内使用 npm 会特别的慢， 可以使用国内源进行加速， 或者自己搭建 npm 的私服。

  使用 node --version 和 npm --version 查看是否安装并且保证较新的版本。

  然后可以使用 npm install 命令进行安装使用。

  npm install vue@next

  --save 是当前项目生效， 不加的话默认为全局生效。

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

  Vue 还提供了编写单文件组件的配套工具。如果你想使用单文件组件，那么你还需要安装 @vue/compiler-sfc：

  npm install -D @vue/compiler-sfc

  除了 @vue/compiler-sfc 之外，你还需要为已选择的打包工具选择一个配套的单文件组件 loader 或 plugin。

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

  4. 使用 CLI 工具构建应用

  CLI: command-line interface 命令行界面， 一般情况下是通过应用的内部接口, 来实现一些不需要操作界面也能完成的工作。

  对于 Vue3 这里使用 Vue-CLI 最新版本的 Vue CLI v4.5, 而且命令改为： @vue/cli 最新版本安装方式为：

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

  
  

  npm 方式

  yarn 方式：

  如果在当前项目中需要升级到最新版本， 可以使用命令 vue upgrade --next 进行升级，大版本不推荐这种方式进行升级。如果需要迁移大版本， 推荐参考迁移指南。

  
  

  接下来就可以使用 Vue/CLI 进行构建应用了。

  创建一个 hello world 应用

  vue create hello-world

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

  进入到 hello-world 的工作目录中

  cd hello-world

  并用 npm run 启动项目

  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  --template vue

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

  npm init vite@latest  -- --template vue

  然后进入到 project 目录中， 特别尴尬，大佬竟然在凌晨3点提交了 Vue.js 的 3.2.13 版本， 导致 npm install 一直提示找不到对应的信息。 不怕技术牛逼的人， 就怕技术牛逼的人还在拼。找不到的原因是因为私服的存在， 有一定的延迟性， 没有办法及时的更新npm 依赖。解决办法是暂时的把私服或者加速关闭， 使用官方源进行 install 就可以了。

  cd  
  npm install
  npm run dev

  打开浏览器查看效果：

  使用 yarn 创建项目

  yarn create vite  --template vue

  cd 
  yarn
  yarn dev

  浏览器效果同上， 不在截图。

  
  

  使用 pnpm 创建项目

  pnpm dlx create-vite  --template vue

  cd 
  pnpm install
  pnpm run dev

  浏览器查看效果和第一个效果一致， 不再截图。

  pnpm

  pnpm 是一个新的构建方式，类似于 maven，把所有的依赖文件相对单独存放， 这样的好处是， 当你的依赖重复的时候， 不会在各自的应用中重复出现， 节省磁盘的空间和安装速度。使用 npm install -g pnpm 安装使用。具体可以查看
  https://www.pnpm.cn/installation 。

  
  

  多种使用方式已经描述完毕， 很多细节的知识点， 需要后续实际使用的过程中进行详细描述。

  
  

  如果学习到了一点点知识点， 就给我个关注，点赞吧， 关注不迷路，可以查看后续更多关于 Vue.js 的知识点。