创建vue3项目的几种方式

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

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

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

特点：

• 官方最新推出的项目脚手架
  
• 基于 Vite 构建
  
• 提供交互式项目配置
  
• 集成了最新 Vue 生态的最佳实践
  

正确使用方式：

1. npm create vue@latest my-vue-app
2. # 或
3. yarn create vue my-vue-app

复制代码

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

• TypeScript 支持
  
• JSX 支持
  
• Vue Router
  
• Pinia (状态管理)
  
• ESLint/Prettier
  
• 测试工具 (Vitest/Cypress)
  
• 等更多选项
  

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

特点：

• 官方传统脚手架工具
  
• 提供图形化界面和命令行两种方式
  
• 配置相对复杂但灵活
  
• 适合中大型项目
  

使用方式：

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

复制代码

优点：

• 成熟的生态系统
  
• 丰富的插件系统
  
• 可配置性高
  
• 支持渐进式迁移
  

缺点：

• 相对较重
  
• 配置复杂
  
• 构建工具基于 Webpack，构建速度较慢
  

三、Vite (vite方式)

特点：

• 新一代前端构建工具
  
• 极快的启动和热更新速度
  
• 原生支持 ES Modules
  

使用方式：

1. npm create vite@latest my-vue-app -- --template vue
2. # 或
3. yarn create vite my-vue-app --template vue

复制代码

优点：

• 开发服务器启动极快
  
• 热更新几乎瞬间完成
  
• 开箱即用的 TypeScript 支持
  
• 更简单的配置
  
• 基于 Rollup 的生产打包
  

缺点：

• 生态相对较新，部分插件可能不兼容
  
• 某些高级配置可能需要更多工作
  

四、直接通过 CDN 引入

特点：

• 最简单快速的方式
  
• 无需构建步骤
  
• 适合学习、原型开发或简单页面
  

**使用方式：
[code][/code]优点：

• 零配置
  
• 即时使用
  
• 适合小型项目或教学演示
  

缺点：

• 无法使用单文件组件(.vue)
  
• 缺乏构建优化
  
• 不适合大型项目
  

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

• 首选：npm create vue@latest (官方最新推荐)
  
• 备选：npm create vite@latest (选择 Vue 模板)
  
• 传统项目：Vue CLI (适合需要 Webpack 或旧插件系统的项目)
  
• 快速原型：CDN 引入方式
  

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

• 与 Vite 的区别：
  
  
  
  • create-vue 是 Vue 团队专门为 Vue 项目优化的脚手架
    
  • 预配置了 Vue 相关生态的集成选项
    
  • 而直接使用 Vite 模板(npm create vite)更通用，适合各种前端框架
    
  
  
• 与 Vue CLI 的区别：
  
  
  
  • create-vue 基于 Vite，构建速度更快
    
  • 更简洁现代的配置
    
  • 不再使用 Webpack，而是使用 Rollup 进行生产构建
    
  
  

功能总结表如下：

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！