Vue 3 项目创建指南：基于 Vue CLI 与 Vite 的两种方式

创建 Vue 3 工程主要有两种方式：基于 Vue CLI 的传统脚手架方式和基于 Vite 的现代构建工具方式。本文将详细介绍这两种方式的创建步骤，并给出完整的示例代码。

方式一：基于 Vue CLI 创建

1. 环境准备

确保已安装 Node.js（建议版本 14.0.0 或更高）和 npm。

2. 安装 Vue CLI

如果尚未安装 Vue CLI，请先全局安装：

bash 复制代码

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

3. 创建项目

使用以下命令创建新项目：

bash 复制代码

vue create my-vue3-project

4. 选择配置

在交互式命令行中：

选择 "Manually select features"（手动选择特性）
勾选需要的特性（如 Babel、TypeScript、Router、Vuex 等）
选择 Vue 3 版本
根据需要选择其他配置选项

5. 启动项目

创建完成后，进入项目目录并启动开发服务器：

bash 复制代码

cd my-vue3-project
npm run serve
# 或使用 yarn
yarn serve

6. 项目结构示例

bash 复制代码

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

方式二：基于 Vite 创建（推荐）

vite 是新一代前端构建工具，官网地址: https://vitejs.cn 。vite 的优势如下

轻量快速的热重载(HMR)，能实现极速的服务启动。
对 Typescript 、JSX、等支持开箱即用。
真正的按需编译，不再等待整个应用编译完成。

webpack 构建与 vite 构建对比图如下。

webpack是先处理，所以加载比较慢。vite一开始就告诉你准备好了，你用哪一个模块就给你处理哪个模块。

1. 环境准备

确保已安装 Node.js（建议版本 14.18+ 或 16+）和 npm。

2. 创建项目

使用以下命令创建新项目：

bash 复制代码

npm create vue@latest
# 或使用 yarn
yarn create vue

3. 项目配置

按照提示进行配置：

bash 复制代码

✔ Project name: ... my-vue3-vite-project
✔ Add TypeScript? ... No / Yes
✔ Add JSX Support? ... No / Yes
✔ Add Vue Router for Single Page Application development? ... No / Yes
✔ Add Pinia for state management? ... No / Yes
✔ Add Vitest for Unit Testing? ... No / Yes
✔ Add an End-to-End Testing Solution? ... No / Cypress / Playwright
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes

配置选项注释说明：

Project name：输入你的项目名称，默认会创建同名文件夹。

Add TypeScript ：是否添加 TypeScript 支持。推荐选择 Yes，TypeScript 能提供更好的类型安全和开发体验。

Add JSX Support ：是否添加 JSX 支持。如果你习惯使用 JSX 语法编写 Vue 组件，可以选择 Yes，这里我选择 No。

Add Vue Router ：是否添加 Vue Router 路由库。如果项目需要多页面/路由功能，推荐选择 Yes。

Add Pinia ：是否添加 Pinia 状态管理库。Pinia 是 Vue 3 官方推荐的状态管理工具，替代 Vuex，推荐选择 Yes。

Add Vitest ：是否添加 Vitest 单元测试框架。Vitest 是 Vite 原生的测试框架，速度快，与 Vite 生态集成好，这里选择No。

Add an End-to-End Testing Solution ：选择端到端测试方案。可选 No（不添加）、Cypress 或 Playwright。

Add ESLint ：是否添加 ESLint 代码质量检查工具。开发推荐选择 No。

Add Prettier：是否添加 Prettier 代码格式化工具。推荐与 ESLint 一起使用，确保代码风格统一。

**选择建议：**对于大多数新项目，推荐选择 TypeScript、Vue Router、Pinia、ESLint 和 Prettier。JSX 和测试工具可根据项目实际需求决定。

4. 安装依赖并启动

bash 复制代码

cd my-vue3-vite-project
npm install
npm run dev
# 或使用 yarn
yarn
yarn dev

5. 项目结构示例

bash 复制代码

my-vue3-vite-project/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

index.html是入口文件。主要是引入main.ts，还有占位显示组件的位置。

main.ts的内容如下：

引入createApp，创建应用App，可以理解为一个盘子
App 就是组件，可以理解为放在盘子上的食物
mount('#app') 可以理解为把果盘放在何处。#app就是index.html入口文件的定义的id。

6. Vite 的优势

极速启动：冷启动时间远快于 Webpack
热更新快：模块热替换（HMR）速度更快
按需编译：原生 ES 模块支持，无需打包即可开发
开箱即用：内置 TypeScript、JSX、CSS 预处理器等支持

两种方式对比

特性	Vue CLI	Vite
构建工具	Webpack	Vite
启动速度	较慢	极快
热更新	较慢	极快
配置复杂度	较高	较低
生态成熟度	非常成熟	快速成长
推荐场景	传统项目、需要 Webpack 生态	新项目、追求开发体验

总结与建议

对于新项目，强烈推荐使用 Vite 方式创建 Vue 3 项目，因为它提供了更好的开发体验和更快的构建速度。Vue CLI 方式更适合需要 Webpack 特定功能或维护现有 Vue CLI 项目的场景。

无论选择哪种方式，创建完成后都可以按照以下步骤验证项目是否正常运行：

访问 http://localhost:8080（Vue CLI）或 http://localhost:5173（Vite）
看到 Vue 欢迎页面表示项目创建成功
开始编写你的 Vue 3 组件和业务逻辑