当前位置：首页 > news >正文

【Vue3 ✨】Vue3 入门之旅 · 第二篇：安装与配置开发环境

news 2025/9/17 6:38:49

本篇文章将带你了解如何安装和配置 Vue3 开发环境，并引导你使用 Vue CLI 或 Vite 创建一个基础的 Vue3 项目。无论是 Vue CLI 还是 Vite，都是构建 Vue3 项目的常见选择，本篇将帮助你快速入门并准备好开发环境。

Vue3 开发环境概述

Vue3 项目的开发可以使用两种常见的构建工具：Vue CLI 和 Vite。这两种工具都能够帮助开发者快速启动 Vue3 项目，但它们有不同的特点和使用场景。

Vue CLI：Vue CLI 是 Vue 官方提供的脚手架工具，能够帮助我们快速创建一个完整的 Vue3 项目。它支持插件和配置扩展，适合用于中大型项目。
Vite：Vite 是一个新的构建工具，专门为现代 JavaScript 开发设计。它相比 Vue CLI 更加轻量，采用了原生的 ES 模块支持，构建速度更快，非常适合 Vue3 项目的快速开发。

安装 Vue3 开发环境

首先，我们需要安装 Node.js，这为开发 Vue3 应用提供了必要的运行时环境。你可以从 Node.js 官网下载并安装最新的 LTS 版本。

安装完成后，检查是否成功安装：

node -v
npm -v

确保你已经安装了 Node.js 和 npm。然后，我们可以选择使用 Vue CLI 或 Vite 来创建 Vue3 项目。

使用 Vue CLI 创建 Vue3 项目

1. 安装 Vue CLI

如果你还没有安装 Vue CLI，可以通过 npm 全局安装：

npm install -g @vue/cli

2. 创建 Vue3 项目

安装完成后，可以使用以下命令创建一个新的 Vue3 项目：

vue create my-vue3-project

在创建过程中，你可以选择 Vue3 配置（确保选择 Vue3）。

3. 启动开发服务器

项目创建完成后，进入项目目录，运行以下命令启动开发服务器：

cd my-vue3-project
npm run serve

此时，你可以在浏览器中访问 http://localhost:8080 来查看 Vue3 项目的默认页面。

使用 Vite 创建 Vue3 项目

1. 安装 Vite

Vite 提供了一种更简便的方式来创建 Vue3 项目。你可以使用以下命令创建项目：

npm create vite@latest my-vue3-project --template vue

这条命令会自动创建一个基于 Vite 和 Vue3 的项目模板。

2. 启动开发服务器

进入项目目录并启动开发服务器：

cd my-vue3-project
npm install
npm run dev

在浏览器中访问 http://localhost:3000，你就可以看到 Vite 启动的 Vue3 项目。

项目目录结构解析

无论是通过 Vue CLI 还是 Vite 创建的项目，都有一个标准的项目目录结构。以下是一些常见的文件和文件夹：

my-vue3-project/
├── node_modules/          # 项目依赖
├── public/                # 公共静态文件
│   └── index.html         # 入口 HTML 文件
├── src/                   # 源代码
│   ├── assets/            # 静态资源（如图片、样式等）
│   ├── components/        # Vue 组件
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件
├── package.json           # 项目配置文件
├── vite.config.js         # Vite 配置文件（如果使用 Vite）
└── vue.config.js          # Vue CLI 配置文件（如果使用 Vue CLI）