vue项目搭建

你想要搭建一个 Vue 项目，我会为你提供两种最主流、最实用的搭建方式：基于 Vue CLI（适合新手）和基于 Vite（新一代构建工具，速度更快），你可以根据自己的需求选择。

前置条件

在开始之前，请确保你的电脑已经安装了：

Node.js (推荐 LTS 版本，v16 及以上)：可以在终端执行 node -v 查看版本
npm 或 yarn (包管理器)：执行 npm -v 或 yarn -v 查看

方式一：使用 Vue CLI 搭建（新手友好）

Vue CLI 是官方维护的脚手架工具，配置简单、开箱即用，适合 Vue 2 和 Vue 3 项目。

步骤 1：安装 Vue CLI

打开终端，执行以下命令全局安装 Vue CLI：

1
2
3
4
5


# 使用 npm 安装
npm install -g @vue/cli

# 或使用 yarn 安装
yarn global add @vue/cli

验证安装成功：

1

vue --version

步骤 2：创建 Vue 项目

1
2


# 创建项目（替换 my-vue-project 为你的项目名）
vue create my-vue-project

执行命令后会出现交互式选择：

选择预设：
- Default ([Vue 3] babel, eslint)：Vue 3 基础模板（推荐新手）
- Default ([Vue 2] babel, eslint)：Vue 2 基础模板
- Manually select features：手动选择功能（如路由、Vuex/Pinia、CSS 预处理器等）
按提示选择后，等待依赖安装完成。

步骤 3：运行项目

1
2
3
4
5
6
7
8


# 进入项目目录
cd my-vue-project

# 启动开发服务器
npm run serve

# 或 yarn
yarn serve

启动成功后，终端会显示本地访问地址（通常是 http://localhost:8080），打开浏览器访问即可看到 Vue 初始页面。

方式二：使用 Vite 搭建（推荐，速度更快）

Vite 是 Vue 官方推荐的新一代构建工具，冷启动、热更新速度远超 Vue CLI，适合 Vue 3 项目。

步骤 1：创建 Vite + Vue 项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# npm 6.x
npm create vite@latest my-vue-project -- --template vue

# npm 7+ (需要额外的 --)
npm create vite@latest my-vue-project -- --template vue

# yarn
yarn create vite my-vue-project --template vue

# pnpm
pnpm create vite my-vue-project -- --template vue

my-vue-project 是你的项目名，可自定义
--template vue 指定模板为 Vue 3；如果需要 Vue 2，替换为 vue-ts（Vue 2 + TS）或手动调整

步骤 2：安装依赖并运行

1
2
3
4
5
6
7
8


# 进入项目目录
cd my-vue-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动成功后，终端会显示访问地址（通常是 http://127.0.0.1:5173/），打开即可。

可选：添加常用依赖（路由、状态管理）

新手项目通常需要路由和状态管理，执行以下命令安装：

1
2
3
4
5


# 安装 Vue Router (路由)
npm install vue-router@4

# 安装 Pinia (Vue 3 官方状态管理，替代 Vuex)
npm install pinia

总结

Vue CLI：适合新手、需要兼容 Vue 2、追求配置简单的场景，缺点是构建速度较慢。
Vite：推荐首选，Vue 3 官方推荐，构建 / 热更新速度极快，适合绝大多数现代 Vue 项目。
核心步骤：安装 Node.js → 选择搭建工具 → 创建项目 → 安装依赖 → 启动项目，后续可按需添加路由、Pinia 等依赖。