Vue3 安装

将 Vue.js 添加到项目中主要有四种方式:

  1. 在页面上以 CDN 包的形式导入。
  2. 下载 JavaScript 文件并自行托管
  3. 使用 npm 安装它。
  4. 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

CDN

对于制作原型或学习,可以这样使用最新版本:

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

下载并自托管

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

npm

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

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

Vue 还提供了编写单文件组件的配套工具。

1
$ npm install -D @vue/compiler-sfc

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

命令行工具 (CLI)

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

Vue CLI 的文档

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

1
2
3
yarn global add @vue/cli
# 或
npm install -g @vue/cli

然后在 Vue 项目中运行:

1
vue upgrade --next