VUE官方文档讲解

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

2. 下载 JavaScript 文件并自行托管。

3. 使用 npm 安装它。

4. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

发布版本说明

最新版本：

每个版本的详细发布说明都可以在 GitHub 上找到。

#Vue Devtools

目前处于测试阶段 - Vuex 和 Router 的集成仍在进行中。

通过 Vue School 的免费课程学习如何安装和使用 Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。

获取 Chrome 扩展程序

获取 Firefox 附加组件

获取独立的 Electron 应用程序

#CDN

对于制作原型或学习，你可以这样使用最新版本：

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

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

#下载并自托管

如果你想避免使用构建工具，但又无法在生产环境使用 CDN，那么你可以下载相关 .js 文件并自行托管在你的服务器上。然后你可以通过 <script> 标签引入，与使用 CDN 的方法类似。

这些文件可以在 unpkg 或者 jsDelivr 这些 CDN 上浏览和下载。各种不同文件将在以后解释，但你通常需要同时下载开发环境构建版本以及生产环境构建版本。

#npm

在用 Vue 构建大型应用时推荐使用 npm 安装[1] 。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

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

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

$ npm install -D @vue/compiler-sfc
 
 
 复制

如果你是从 Vue 2 过渡而来的，请注意 @vue/compiler-sfc 替换掉了 vue-template-compiler

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

大多数情况下，我们更倾向于使用 Vue CLI 来创建一个配置最小化的 webpack 构建版本。

#命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

TIP

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。

对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli：

 
yarn global add @vue/cli
 
# 或
 
npm install -g @vue/cli
 
 
 复制

然后在 Vue 项目中运行：

 
vue upgrade --next
 
 
 复制

#Vite

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

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 npm：

 
# npm 6.x
 
$ npm init vite@latest <project-name> --template vue
 
 
 
# npm 7+，需要加上额外的双短横线
 
$ npm init vite@latest <project-name> -- --template vue
 
 
 
$ cd <project-name>
 
$ npm install
 
$ npm run dev
 
 
 复制

或者 yarn：

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
 
 
 复制

或者 pnpm:

$ pnpm create vite <project-name> -- --template vue
$ cd <project-name>
$ pnpm install
$ pnpm dev
 
 
 复制

#对不同构建版本的解释

在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。下面是一个概述，根据不同的使用情况，应该使用哪个 dist 文件：

#使用 CDN 或没有构建工具

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

• 若要通过浏览器中的 <script src="..."> 直接使用，则暴露 Vue 全局。

• 浏览器内模板编译：

  • vue.global.js 是包含编译器和运行时的“完整”构建版本，因此它支持动态编译模板。

  • vue.runtime.global.js 只包含运行时，并且需要在构建步骤期间预编译模板。

• 内联所有 Vue 核心内部包——即：它是一个单独的文件，不依赖于其他文件。这意味着你必须导入此文件和此文件中的所有内容，以确保获得相同的代码实例。

• 包含硬编码的 prod/dev 分支，并且 prod 构建版本是预先压缩过的。将 *.prod.js 文件用于生产环境。

提示

全局打包不是 UMD 构建的，它们被打包成 IIFEs，并且仅用于通过 <script src="..."> 直接使用。

#vue(.runtime).esm-browser(.prod).js：

• 用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。

• 与全局构建版本共享相同的运行时编译、依赖内联和硬编码的 prod/dev 行为。

#使用构建工具

#vue(.runtime).esm-bundler.js：

• 用于 webpack，rollup 和 parcel 等构建工具。

• 留下 prod/dev 分支的 process.env.NODE_ENV 守卫语句 (必须由构建工具替换)。

• 不提供压缩版本 (打包后与其余代码一起压缩)。

• import 依赖 (例如：@vue/runtime-core，@vue/runtime-compiler)

  • 导入的依赖项也是 esm bundler 构建版本，并将依次导入其依赖项 (例如：@vue/runtime-core imports @vue/reactivity)。