本节我们来学习 Vue3 的安装。Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。官网中给出了多种安装 Vue3 的方式。但是并不推荐新手直接使用 vue-cli，尤其是在还不熟悉基于 Node.js 的构建工具时。

Vue的开发工具

我们知道在 Vue2 有一个叫做 vue-devtool 的开发工具，这个工具可以看到到组件的各种属性、事件的触发。所以在开发时推荐在浏览器中安装这个工具。

• 获取 Chrome Extension。
• 获取 Firefox 插件。
• 获取标准的 Electron app。

手动安装vue-devtool

除了直接 chrome 商店安装，在也可以选择手动安装。

第一步：找到 vue-devtools 的 github 项目，并将其 clone 到本地。（注意，一定要 clone 主干 master 的代码，因为进去可能是分支 dev，切换到 master上再 clone）。

git clone https://github.com/vuejs/vue-devtools.git

第二步：安装项目所需要的 npm 包。

npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install

第三步：编译项目文件。

npm run build

第四步：添加至 chrome 浏览器。

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择 `vue-devtools>shells` 下的 `chrome` 文件夹。
// 如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。

安装之后我们通过按下 F12 键 ，来查看是否安装成功，如下图所示：

Vue的安装

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

• 在页面上以 CDN package 的形式导入。
• 使用 npm 安装它。
• 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如热重载、保存时的提示等等)。

CDN

如果我们在某些情况下，只需要学习，不想使用 Vue 自带的脚手架搭建项目，则只需要引入下面的链接，我们就可以使用 Vue3.0 的各种 API。

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

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

npm

在用 Vue 构建大型应用时推荐使用 npm 的安装方法。NPM 能很好地和诸如 Webpack 或 Browserify 等模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

要使用 npm，前提是已经安装好了 node，安装好 node 后，自然会自带 npm。

下面是安装 Vue3.0 的 npm 命令：

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

命令行工具 (CLI)

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

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

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

然后在 Vue 项目运行：

vue upgrade --next

Vite构建工具

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

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

使用 npm：

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn：

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

如何升级vue-cli

要升级 vue-cli，首先我们需要使用以下命令卸载 vue-cli：

npm uninstall @vue/cli -g

然后再重新安装一次即可：

npm install @vue/cli -g

我们可以通过 vue --version 命令来查看 Vue 的版本，如下图所示：

创建项目

我们在指定目录中创建一个 vue_three 的文件夹，然后在命令行工具中运行如下命令：

$ npm init vite-app my_vue

如下图所示：

然后初始化完项目，通过命令 cd my_vue 进入到项目里面，然后再执行 npm install 安装依赖：

依赖安装完成后，可以通过 npm run dev 启动项目：

然后就可以通过 http://localhost:3000 来访问项目了，在浏览器中打开如下图所示：