Vue CLI 5新特性介绍：如何快速搭建Vue 3项目

Vue CLI 5 是 Vue.js 官方提供的命令行工具的最新版本，它支持 Vue 3 的项目搭建，并引入了许多新特性以简化开发流程。本文将详细介绍如何使用 Vue CLI 5 快速搭建 Vue 3 项目，并深入解析其新特性和配置方法。

Vue CLI 5 的主要新特性

在 Vue CLI 5 中，官方对工具进行了优化和升级，主要包括以下几点：

1. 默认支持 Vue 3：Vue CLI 5 已经完全兼容 Vue 3，并且能够自动为 Vue 3 提供最佳配置。
2. 改进的依赖管理：通过更智能的依赖解析，减少了不必要的包安装。
3. Vite 支持（实验性）：虽然 Vue CLI 基于 Webpack，但 Vue CLI 5 引入了对 Vite 的初步支持，用户可以选择使用 Vite 来提升开发体验。
4. 插件生态系统更新：许多插件已适配 Vue 3，确保开发者可以无缝迁移或创建新的 Vue 3 项目。

接下来我们将详细讲解如何使用 Vue CLI 5 搭建 Vue 3 项目。

步骤一：安装 Vue CLI 5

首先，你需要确保全局安装了 Vue CLI 5。如果之前已经安装过旧版本的 Vue CLI，请先卸载旧版本，然后安装最新版本。

# 卸载旧版本（如果有）
npm uninstall -g @vue/cli

# 安装 Vue CLI 5
npm install -g @vue/cli@latest

可以通过以下命令检查 Vue CLI 的版本是否为 5.x：

vue --version

步骤二：创建 Vue 3 项目

运行以下命令来创建一个新的 Vue 3 项目：

vue create my-vue3-project

在交互式提示中，选择 Manually select features（手动选择功能），以便自定义项目的配置。以下是关键选项的说明：

1. 选择预设或手动配置：推荐选择 Manually select features，这样你可以明确指定需要的功能。
2. 选择 Vue 版本：在功能选择页面，按空格键选择 Vue 3，确保项目基于 Vue 3 构建。
3. 其他功能选择：
   • Router：用于页面路由管理。
   • Vuex：状态管理工具（注意：Vue 3 推荐使用 Pinia 替代 Vuex）。
   • Linter / Formatter：代码格式化和静态检查工具。
   • Unit Testing 和 E2E Testing：单元测试和端到端测试框架。

完成选择后，Vue CLI 将根据你的配置生成项目文件。

步骤三：项目结构解析

创建完成后，进入项目目录并查看其结构：

cd my-vue3-project
tree -L 2

典型的 Vue 3 项目结构如下：

my-vue3-project/
├── node_modules/          # 依赖包
├── public/                # 静态资源
├── src/                   # 源代码
│   ├── assets/            # 静态资源
│   ├── components/        # 组件
│   ├── App.vue           # 根组件
│   └── main.js            # 入口文件
├── .gitignore             # Git 忽略规则
├── babel.config.js        # Babel 配置
├── package.json           # 项目依赖和脚本
└── vue.config.js          # 自定义配置（可选）

步骤四：启动开发服务器

运行以下命令启动开发服务器：

npm run serve

浏览器会自动打开 http://localhost:8080，显示默认的 Vue 3 欢迎页面。

步骤五：探索 Vue 3 新特性

Vue 3 引入了许多新特性，例如 Composition API、Teleport 和 Fragments 等。以下是一个简单的示例，展示如何在 Vue 3 中使用 Composition API。

示例代码：使用 Composition API

// src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('欢迎来到 Vue 3');
    const increment = () => {
      message.value += '!';
    };

    return { message, increment };
  }
};
</script>

<style scoped>
.hello {
  text-align: center;
}
</style>

在这个例子中，我们使用了 ref 创建了一个响应式变量 message，并通过 setup 方法将其暴露给模板。

步骤六：优化与扩展

使用 TypeScript

如果你希望在项目中使用 TypeScript，可以在创建项目时选择 Add TypeScript 功能，或者手动添加 TypeScript 支持。

vue add typescript

切换到 Vite（实验性）

如果你想尝试使用 Vite 而不是 Webpack，可以按照以下步骤操作：

1. 安装 Vite 插件：

   vue add vite
   

2. 修改 package.json 中的脚本，替换为 Vite 的命令：

   "scripts": {
     "serve": "vite",
     "build": "vite build"
   }
   

3. 运行开发服务器：

   npm run serve
   

总结

Vue CLI 5 提供了强大的工具链支持，使得开发者可以快速搭建 Vue 3 项目并充分利用 Vue 3 的新特性。无论是 Composition API 还是 Vite 支持，Vue CLI 5 都为现代前端开发提供了极大的便利。