Vue 3 项目创建方式对比（npm create vue@latest -- --typescript --eslint --prettier 自带格式化）

Irene19912025-12-16 14:54

Vue 3 项目创建方式与代码格式化对比

各创建方式对代码格式化的支持

创建方式 自带代码格式化 格式化工具 配置状态 如何启用
create-vue ✅ 自带（可选） Prettier 完整预配置（选择时自动配置） 创建时选择 "Add Prettier for code formatting"
Vue CLI ✅ 自带（可选） ESLint + Prettier 完整预配置（选择时自动配置） 创建时选择 "ESLint + Prettier" 配置
Vite 直接创建 ❌ 不自带 无 需要手动配置 需手动安装和配置 Prettier
手动创建 ❌ 不自带 无 需要手动配置 需手动安装和配置所有工具

详细对比

1. create-vue - 推荐选择 ⭐

创建时选择格式化：

bash

bash 复制代码 
npm create vue@latest
# 交互式选择时：
# ✔ Add ESLint for code quality? ... Yes
# ✔ Add Prettier for code formatting? ... Yes  # ← 选择这个！

自带功能：

  • ✅ Prettier 已安装

  • ✅ ESLint 集成 (@vue/eslint-config-prettier)

  • ✅ 保存时自动格式化（VS Code 配置）

  • ✅ 格式化脚本 在 package.json

  • ✅ 预定义的格式化规则

生成的配置：

json

javascript 复制代码 
// package.json
{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "devDependencies": {
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^9.0.0",
    "eslint-plugin-vue": "^9.0.0",
    "prettier": "^3.0.0"
  }
}
json

// .prettierrc.json
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}
javascript

// eslint.config.js
import { defineConfig } from 'eslint-define-config'
import vue from 'eslint-plugin-vue'
import prettier from 'eslint-config-prettier'

export default defineConfig({
  extends: [
    'plugin:vue/vue3-recommended',
    prettier  // ← 集成 Prettier 规则
  ],
  rules: {
    // 自定义规则
  }
})

2. Vue CLI - 传统选择

创建时选择格式化：

bash

复制代码 
vue create my-project
# 选择 "Manually select features"
# ✔ Choose: ESLint + Prettier  # ← 选择这个组合！

自带功能：

  • ✅ ESLint + Prettier 集成

  • ✅ 保存时自动修复

  • ✅ Git 提交时检查（可选）

  • ✅ Vue 专用格式化规则

配置特点：

  • 基于较旧的 ESLint 6/7 版本

  • 使用 .eslintrc.js 而不是新的扁平化配置

  • 规则相对保守

3. Vite 直接创建 - 需要手动配置 ❌

创建过程：

bash

复制代码 
npm create vite@latest my-project
# 选择 Vue → TypeScript（或其他）
# 完成后：无任何格式化工具！

需要手动添加：

bash

复制代码 
# 安装格式化工具
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript @vue/eslint-config-prettier

# 创建所有配置文件
# .eslintrc.js, .prettierrc.json, .eslintignore, .prettierignore

# 配置 VS Code 设置
# .vscode/settings.json

各方式完整配置对比

功能 create-vue（选Prettier） Vue CLI（选ESLint+Prettier） Vite 直接创建
格式化工具 Prettier 3.x Prettier 2.x 无
代码检查 ESLint 9.x（扁平配置） ESLint 7.x（传统配置） 无
Vue 3 规则 ✅ 最新规则 ✅ 适配规则 无
TypeScript 支持 ✅ 内置支持 ✅ 需要额外配置 无
保存时格式化 ✅ 自动配置 ✅ 自动配置 需手动配置
VS Code 配置 ✅ 自动生成 ⚠️ 部分生成 需手动创建
格式化脚本 ✅ npm run lint ✅ npm run lint 无
现代性 ⭐⭐⭐⭐⭐（最新） ⭐⭐⭐（较旧） ⭐（需要配置）

推荐创建方式（按需求）

1. 最佳选择：create-vue + 格式化选项 ⭐⭐⭐⭐⭐

bash

复制代码 
# 创建自带格式化的 Vue 3 项目
npm create vue@latest my-app -- \
  --typescript \
  --router \
  --pinia \
  --eslint \
  --prettier  # 关键参数！

2. 交互式选择（推荐给新手）：

bash

复制代码 
npm create vue@latest
# 逐步选择：Yes to TypeScript, ESLint, Prettier

3. Vue CLI（旧项目迁移）：

bash

复制代码 
vue create my-project
# Manually select features
# 勾选：TypeScript, Router, Vuex, CSS Pre-processors, Linter/Formatter
# 选择：ESLint + Prettier
# 选择：Lint on save

如果已经创建了项目（无格式化）

为现有 Vite 项目添加格式化：

bash

bash 复制代码 
# 1. 安装必要依赖
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript @vue/eslint-config-prettier

# 2. 创建配置文件
# eslint.config.js
import { defineConfig } from 'eslint-define-config'
import vue from 'eslint-plugin-vue'
import prettier from 'eslint-config-prettier'

export default defineConfig({
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ]
})

# .prettierrc.json
{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

# 3. 添加 scripts
# package.json
{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write ."
  }
}

# 4. VS Code 配置 (.vscode/settings.json)
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

一键添加脚本：

bash

复制代码 
# 使用官方工具快速添加
npx @vue/quickstart --feature eslint --feature prettier

各方式的 VS Code 体验

create-vue（最佳体验）：

  1. 开箱即用的保存时格式化

  2. 错误自动高亮

  3. 快速修复建议

  4. 统一的团队配置

Vite 直接创建（需要配置）：

  1. 需要手动安装 VS Code 扩展：

    • ESLint

    • Prettier

    • Volar (Vue 语言支持)

  2. 需要手动配置工作区设置

  3. 需要团队统一配置

项目示例对比

create-vue 格式化项目结构：

text

复制代码 
my-app/
├── .vscode/
│   └── settings.json      # 自动配置的 VS Code 设置
├── .prettierrc.json       # Prettier 配置
├── eslint.config.js       # ESLint 扁平配置
├── package.json          # 包含 lint 脚本
└── src/

Vite 直接创建项目结构：

text

复制代码 
my-app/
├── vite.config.ts        # 只有构建配置
├── package.json          # 无 lint 脚本
└── src/                  # 无代码检查配置

结论与建议

要创建自带代码格式化的 Vue 3 项目：

  1. 首选方案：

    bash

    bash 复制代码 
    npm create vue@latest -- --typescript --eslint --prettier

    • ⭐ 最新工具链（ESLint 9 + Prettier 3）

    • ⭐ 最佳 Vue 3 支持

    • ⭐ 最少配置工作

次选方案（传统）：

bash

bash 复制代码 
vue create my-project
# 选择 ESLint + Prettier

  • ✅ 成熟稳定

  • ⚠️ 工具链较旧

避免的方案（除非有特殊需求）：

bash

bash 复制代码 
npm create vite@latest
# 需要大量手动配置

创建最小化 Vue 项目

npm create vue@latest my-app -- --minimal

使用预设选项（跳过交互式问答）

npm create vue@latest my-app -- --typescript --router --pinia --vitest

企业级完整配置

bash 复制代码 
npm create vue@latest my-enterprise-app -- \
  --typescript \
  --router \
  --pinia \
  --vitest \
  --playwright \
  --eslint \
  --prettier

关键建议：

  • 新项目一律使用 create-vue，它是 Vue 官方推荐的现代化脚手架

  • 创建时务必选择 Prettier 选项，节省大量配置时间

  • 团队项目必须统一格式化配置，保证代码一致性

  • VS Code 用户会获得最佳开箱体验

通过 create-vue 选择 Prettier，你可以获得一个完全配置好、开箱即用的代码格式化环境，这是创建 Vue 3 项目最省心、最专业的方式。

完整的组合命令

bash

复制

下载

复制代码 
# 组合所有选项（最完整配置）
npm create vue@latest my-app -- \
  --typescript \
  --router \
  --pinia \
  --vitest \
  --eslint \
  --prettier

可用的所有选项参数

选项 说明 默认值
--typescript 或 --ts 使用 TypeScript false
--jsx 启用 JSX 支持 false
--router 添加 Vue Router false
--pinia 添加 Pinia 状态管理 false
--vitest 添加 Vitest 单元测试 false
--cypress 添加 Cypress E2E 测试 false
--playwright 添加 Playwright E2E 测试 false
--eslint 添加 ESLint false
--prettier 添加 Prettier false
--minimal 最小化配置（跳过所有选项） false
--force 或 -f 覆盖现有目录 false

不同组合示例

1. 企业级完整配置（推荐 ⭐）

bash

复制代码 
npm create vue@latest my-enterprise-app -- \
  --typescript \
  --router \
  --pinia \
  --vitest \
  --playwright \
  --eslint \
  --prettier

2. 中型项目配置

bash

复制代码 
npm create vue@latest my-app -- \
  --typescript \
  --router \
  --pinia \
  --eslint \
  --prettier

3. 快速原型配置

bash

复制代码 
npm create vue@latest quick-prototype -- \
  --typescript \
  --pinia \
  --eslint

4. 最小化配置

bash

复制代码 
npm create vue@latest simple-app --minimal

组合后的项目特性

使用完整组合命令后，项目将包含：

核心技术栈：

  • ✅ Vue 3 + Vite

  • ✅ TypeScript

  • ✅ Vue Router 4

  • ✅ Pinia 状态管理

开发工具：

  • ✅ ESLint（代码检查）

  • ✅ Prettier（代码格式化）

  • ✅ 保存时自动格式化

测试工具：

  • ✅ Vitest（单元测试）

  • ✅ Vue Test Utils

  • ✅ 测试示例代码

生成的结构：

text

复制代码 
my-app/
├── src/
│   ├── components/     # 组件
│   ├── views/          # 页面视图（路由）
│   ├── stores/         # Pinia stores
│   ├── router/         # 路由配置
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── tests/
│   ├── unit/           # 单元测试
│   └── e2e/            # E2E 测试（如果选了）
├── .prettierrc.json    # Prettier 配置
├── eslint.config.js    # ESLint 配置
├── vite.config.ts      # Vite 配置
├── tsconfig.json       # TypeScript 配置
└── package.json        # 完整依赖

注意事项

1. 选项间依赖关系

  • --prettier 通常需要 --eslint（用于集成）

  • --jsx 通常需要 --typescript

  • --cypress 和 --playwright 互斥（只能选一个）

2. 顺序无关

选项顺序不影响结果：

bash

复制代码 
# 这些命令效果相同
npm create vue@latest app -- --typescript --router --eslint
npm create vue@latest app -- --router --eslint --typescript
npm create vue@latest app -- --eslint --typescript --router

3. 覆盖现有目录

如果目录已存在，需要加 --force：

bash

复制代码 
npm create vue@latest existing-app -- --force --typescript --router

交互式 vs 参数式

参数式（推荐给熟练开发者）

bash

复制代码 
# 一键创建，无需交互
npm create vue@latest my-app -- --typescript --router --pinia --eslint --prettier

交互式（适合新手）

bash

复制代码 
# 逐步选择
npm create vue@latest
# 然后回答每个问题：
# ✔ Add TypeScript? Yes
# ✔ Add JSX Support? No
# ✔ Add Vue Router? Yes
# ✔ Add Pinia? Yes
# ✔ Add Vitest? Yes
# ✔ Add ESLint? Yes
# ✔ Add Prettier? Yes

验证创建结果

创建后检查 package.json：

json

javascript 复制代码 
{
  "name": "my-app",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",           // 来自 --vitest
    "lint": "eslint . --fix"         // 来自 --eslint
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.0",          // 来自 --router
    "pinia": "^2.1.0"                // 来自 --pinia
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "@vue/eslint-config-prettier": "^9.0.0",  // 来自 --prettier
    "@vue/test-utils": "^2.4.0",     // 来自 --vitest
    "typescript": "^5.3.0",          // 来自 --typescript
    "vite": "^5.0.0",
    "vitest": "^1.0.0",              // 来自 --vitest
    "eslint": "^9.0.0"               // 来自 --eslint
  }
}

总结

可以随意组合所有选项 ，create-vue 支持任意组合。推荐使用完整的企业级配置，一次性获得现代化的 Vue 3 开发环境。

最佳实践命令

bash

bash 复制代码 
npm create vue@latest my-project -- \
  --typescript \
  --router \
  --pinia \
  --vitest \
  --eslint \
  --prettier

这样创建的项目包含了现代 Vue 开发所需的所有核心工具，开箱即用，无需额外配置！

手动创建 Vue 项目（简单说明）

什么是手动创建？

手动创建就是从零开始，自己动手搭建 Vue 项目的所有基础设施。

核心特征：

  • 不用任何脚手架工具（不用 create-vue、不用 Vite CLI、不用 Vue CLI）

  • 自己创建每个文件和文件夹

  • 自己安装每个依赖包

  • 自己编写每个配置文件

手动创建 vs 脚手架创建

对比项 手动创建 脚手架创建
起点 空文件夹 生成完整项目结构
依赖安装 手动 npm install vue 自动安装所有依赖
配置文件 手动创建 vite.config.js 自动生成配置文件
项目结构 自己设计目录结构 预设最佳实践结构
时间成本 高（30分钟以上） 低（1分钟内）

手动创建的基本步骤

bash

复制代码 
# 1. 创建空文件夹
mkdir my-vue-app
cd my-vue-app

# 2. 初始化 package.json
npm init -y

# 3. 手动安装核心依赖（一个个来）
npm install vue
npm install -D vite @vitejs/plugin-vue

# 4. 手动创建所有文件
touch index.html
touch src/main.js
touch src/App.vue
touch vite.config.js
touch .gitignore

# 5. 手动编写每个文件内容
# 6. 如果需要，再手动安装其他工具（路由、状态管理等）

手动创建的项目文件示例

package.json（手动编写）：

json

复制代码 
{
  "name": "my-vue-app",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}

vite.config.js（手动编写）：

javascript

复制代码 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

其他文件都要自己一个个写...

什么情况下需要手动创建？

需要手动创建的场景：

  1. 学习目的：想彻底理解 Vue 项目的构建原理

  2. 特殊需求：项目有非常特殊的架构要求

  3. 极简项目：只需要最基本的几个文件

  4. 自定义工具链：使用非主流构建工具

不应该手动创建的场景（占99%情况）：

  • ✅ 日常开发项目 → 用 create-vue

  • ✅ 企业级应用 → 用 create-vue

  • ✅ 团队协作项目 → 用 create-vue

  • ✅ 快速原型 → 用 create-vue

一句话总结

手动创建 = 完全自己从头搭建所有东西，就像自己造轮子而不是用现成的汽车。

现代开发中，99% 的情况应该使用脚手架（create-vue），手动创建主要用于学习和特殊需求。

相关推荐
用户841794814565 小时前
vxe-table 实现滚动加载数据，无限加载数据教程
vue.js
_请输入用户名5 小时前
Vue 3 源码项目结构详解
前端·vue.js
前端无涯5 小时前
Vue3---(2)setup
vue.js
前端无涯5 小时前
Vue---scoped,deep,CSS Modules
vue.js
前端无涯5 小时前
Vue3---(1)项目工程创建
vue.js
前端无涯6 小时前
Vue3---(3)ref,reactive,toRefs,toRef
vue.js
哆啦A梦15886 小时前
商城后台管理系统 01 Vue-i18n国际化
前端·javascript·vue.js
期待のcode6 小时前
Vue的安装创建与运行
前端·javascript·vue.js
+VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue旅游信息推荐系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计·旅游
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05Open-AutoGLM Windows 安装部署教程06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10BongoCat - 跨平台键盘猫动画工具