创建vue3项目的几种方式

一、Vue 3 官方推荐创建方式 (create-vue)

这是 Vue 官方团队在 2023 年推出的全新脚手架工具，比之前提到的几种方式更加现代化和官方推荐。

前提条件

• 熟悉命令行
• 已安装 18.3 或更高版本的 Node.js

特点：

• 官方最新推出的项目脚手架

• 基于 Vite 构建

• 提供交互式项目配置

• 集成了最新 Vue 生态的最佳实践

正确使用方式：

npm create vue@latest my-vue-app
# 或
yarn create vue my-vue-app

执行后会进入交互式配置界面，可以选择：

• TypeScript 支持

• JSX 支持

• Vue Router

• Pinia (状态管理)

• ESLint/Prettier

• 测试工具 (Vitest/Cypress)

• 等更多选项

二、Vue CLI (官方脚手架工具)

特点：

• 官方传统脚手架工具

• 提供图形化界面和命令行两种方式

• 配置相对复杂但灵活

• 适合中大型项目

使用方式：

npm install -g @vue/cli
vue create my-project
# 然后选择 Vue 3 预设

优点：

• 成熟的生态系统

• 丰富的插件系统

• 可配置性高

• 支持渐进式迁移

缺点：

• 相对较重

• 配置复杂

• 构建工具基于 Webpack，构建速度较慢

三、Vite (vite方式)

特点：

• 新一代前端构建工具

• 极快的启动和热更新速度

• 原生支持 ES Modules

使用方式：

npm create vite@latest my-vue-app -- --template vue
# 或
yarn create vite my-vue-app --template vue

优点：

• 开发服务器启动极快

• 热更新几乎瞬间完成

• 开箱即用的 TypeScript 支持

• 更简单的配置

• 基于 Rollup 的生产打包

缺点：

• 生态相对较新，部分插件可能不兼容

• 某些高级配置可能需要更多工作

四、直接通过 CDN 引入

特点：

• 最简单快速的方式

• 无需构建步骤

• 适合学习、原型开发或简单页面

**使用方式：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

优点：

• 零配置

• 即时使用

• 适合小型项目或教学演示

缺点：

• 无法使用单文件组件(.vue)

• 缺乏构建优化

• 不适合大型项目

当前 Vue 3 项目创建方式的推荐等级

1. 首选：npm create vue@latest (官方最新推荐)

2. 备选：npm create vite@latest (选择 Vue 模板)

3. 传统项目：Vue CLI (适合需要 Webpack 或旧插件系统的项目)

4. 快速原型：CDN 引入方式

首选的create-vue与其他方式的区别

1. 与 Vite 的区别：

   • create-vue 是 Vue 团队专门为 Vue 项目优化的脚手架

   • 预配置了 Vue 相关生态的集成选项

   • 而直接使用 Vite 模板(npm create vite)更通用，适合各种前端框架

2. 与 Vue CLI 的区别：

• create-vue 基于 Vite，构建速度更快

• 更简洁现代的配置

• 不再使用 Webpack，而是使用 Rollup 进行生产构建

功能总结表如下：