安装与开发环境搭建（Vite vs Vue CLI）

在开始使用 Vue 3 开发项目之前，搭建一个合适的开发环境是至关重要的第一步。Vue 3 支持多种构建工具，其中最常用的包括 Vite 和 Vue CLI。本节将详细介绍如何安装 Vue 3，以及这两种工具的特点、使用场景和配置方法，帮助你选择适合自己的开发方式并快速启动项目。

前置条件

开始之前，请确保你的开发环境满足以下要求：

  • Node.js：版本 16.x 或以上（推荐使用 LTS 版本，如 18.x）。你可以通过命令 node -v 检查版本，若未安装，可从 nodejs.org 下载。
  • 包管理器：建议使用 npm（Node.js 自带）或 Yarn（通过 npm install -g yarn 安装）。
  • 现代浏览器：如 Chrome、Firefox 或 Edge，用于测试和调试。

安装 Vue 3

Vue 3 本身是一个 JavaScript 库，可以通过多种方式引入项目。最简单的方法是通过 CDN，但为了开发完整应用，我们通常使用构建工具来管理依赖和代码。

通过 CDN 引入（快速体验）

如果你只是想快速测试 Vue 3，可以在 HTML 文件中通过 CDN 引入：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  createApp({
    data() { return { message: 'Hello Vue 3!' }; }
  }).mount('#app');
</script>

这种方式适合学习或原型开发，但不推荐用于生产环境。

通过构建工具安装

对于实际项目，推荐使用 Vite 或 Vue CLI 搭建开发环境。以下分别介绍这两种工具。

Vite：下一代构建工具

Vite 是 Vue 3 官方推荐的构建工具，由 Vue 作者尤雨溪开发。它基于浏览器原生的 ES Modules (ESM)，提供了极快的冷启动和热更新速度。

特点

  • 快速启动：无需预打包，利用 ESM 按需加载。
  • 热模块替换（HMR）：修改代码后即时更新，无需刷新页面。
  • 轻量高效：配置文件简单，支持 Vue 3 和 TypeScript 开箱即用。
  • 生产优化：内置 Rollup，打包生成高效的静态文件。

安装与创建项目

  1. 初始化项目： 在终端运行以下命令：

    npm create vite@latest my-vue3-app --template vue
    • my-vue3-app 是项目名称，可自定义。
    • --template vue 指定 Vue 模板。

  2. 进入项目目录并安装依赖：

    cd my-vue3-app
npm install

  3. 启动开发服务器：

    npm run dev

    完成后，访问 http://localhost:5173（端口可能不同），即可看到默认的 Vue 3 项目页面。

项目结构

创建后的项目结构如下：

my-vue3-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js
  • src/main.js：应用程序入口。
  • src/App.vue：根组件。

Vue CLI：传统选择

Vue CLI 是 Vue 2 时代的官方工具，虽然在 Vue 3 中仍受支持，但已逐渐被 Vite 取代。它基于 Webpack，适合需要复杂配置的项目。

特点

  • 功能丰富：支持插件系统，可扩展性强。
  • 生态成熟：与 Vue 2 项目兼容，社区资源丰富。
  • 启动较慢：预打包过程耗时，HMR 速度不如 Vite。
  • 配置复杂：适合有特定需求的开发者。

安装与创建项目

  1. 全局安装 Vue CLI（若已安装可跳过）：

    npm install -g @vue/cli

  2. 创建项目：

    vue create my-vue3-app
    • 选择 Default (Vue 3) 预设，按回车确认。
    • 或选择 Manually select features 自定义配置。

  3. 进入项目目录并启动：

    cd my-vue3-app
npm run serve

    访问 http://localhost:8080 查看项目。

项目结构

Vue CLI 生成的项目结构如下：

my-vue3-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

Vite vs Vue CLI：如何选择？

特性ViteVue CLI
构建速度极快（无需预打包）较慢（Webpack 预构建）
HMR 体验即时更新稍有延迟
学习曲线简单易上手配置较多，较复杂
适用场景新项目、快速开发复杂项目、Vue 2 迁移
生态支持现代工具链，Vue 3 优先成熟但偏传统
  • 推荐 Vite：如果你是新手或开始新项目，Vite 是首选。它简单快速，与 Vue 3 的设计理念一致。
  • 选择 Vue CLI：如果项目需要兼容 Vue 2，或依赖特定的 Webpack 插件，可以继续使用 Vue CLI。

配置开发环境

无论选择哪种工具，以下是一些推荐的配置步骤：

  1. 安装 VS Code：推荐使用 Visual Studio Code 作为编辑器。
  2. 插件安装：
    • Volar：Vue 3 官方推荐的 VS Code 插件，提供语法高亮和智能提示。
    • ESLint 和 Prettier：保持代码规范和格式一致。
  3. 调试工具：安装 Vue DevTools 浏览器扩展（见第 10 章），用于检查组件状态。

总结

通过 Vite 或 Vue CLI，你可以快速搭建一个 Vue 3 开发环境。Vite 凭借其速度和简洁性成为现代开发的首选，而 Vue CLI 则适合需要更多控制权的场景。在本章的下一节，我们将动手创建一个简单的 Vue 3 项目，进一步体验它的魅力。准备好你的代码编辑器，让我们开始吧！
Last Updated::