搜罗万相

外观

vue3创建教程

约 1618 字大约 5 分钟

2026-01-27

你想要一份完整的 Vue 项目创建教程，我会分两种最主流的方式给你讲解（Vue 2 推荐脚手架 vue-cli、Vue 3 推荐官方工具 create-vue），步骤清晰且适合新手，跟着操作就能成功创建项目。

前置准备（必做）

无论创建 Vue 2 还是 Vue 3 项目，都需要先安装 Node.js（附带 npm 包管理器）：

  1. 下载地址：Node.js 官方下载，选择 LTS 版本（长期支持版，稳定无坑，推荐 Windows 选 .msi 安装包、Mac 选 .pkg 安装包）。
  2. 安装步骤：双击安装包，一路默认下一步即可（Windows 建议勾选「Add Node.js to PATH」，会自动配置环境变量）。
  3. 验证是否安装成功：打开终端（Windows 用 CMD 或 PowerShell，Mac/Linux 用终端），输入以下两个命令，能显示版本号即说明安装成功：
    node -v
npm -v
  4. （可选优化）更换 npm 镜像源（国内访问更快，避免下载超时）：
    # 更换为淘宝镜像源
npm config set registry https://registry.npmmirror.com/

方式一：创建 Vue 3 项目（推荐，官方最新方案）

Vue 3 官方推荐使用 create-vue 工具（替代旧的 vue-cli），步骤如下：

步骤 1：安装/调用 create-vue

无需全局安装工具，直接通过 npm init 调用，终端输入以下命令（项目名称可自定义，建议小写、无空格，可用连字符分隔，例如 my-vue3-project）：

npm init vue@latest

步骤 2：交互式配置项目

执行上述命令后，终端会出现一系列交互式选项，新手可参考以下选择（按需取舍，看不懂的直接按回车选「No」，后续可修改）：

  1. Project name：项目名称，直接回车使用默认值，或输入自定义名称后回车。
  2. Add TypeScript?：是否支持 TypeScript（强类型语言），新手选 No（输入 n 回车）。
  3. Add JSX Support?：是否支持 JSX 语法，新手选 No。
  4. Add Vue Router for Single Page Application development?：是否安装路由（用于页面跳转），需要的话选 Yes（输入 y 回车），否则选 No。
  5. Add Pinia for state management?：是否安装状态管理工具（用于全局数据共享），新手可选 No，后续需要再安装。
  6. Add Vitest for unit testing?：是否安装单元测试工具，新手选 No。
  7. Add an End-to-End Testing Solution?：是否安装端到端测试工具，新手选 No。
  8. Add ESLint for code quality?：是否安装代码规范检查工具，选 Yes（有助于养成良好编码习惯）。
  9. Add Prettier for code formatting?：是否安装代码格式化工具，新手选 No，后续需要再配置。

步骤 3：进入项目目录并安装依赖

配置完成后，终端会提示你进入项目目录，执行以下命令（将 my-vue3-project 替换为你的项目名称）：

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

# 安装项目依赖（npm 会自动读取 package.json 中的依赖并下载）
npm install

步骤 4：启动开发服务器

依赖安装完成后，输入以下命令启动本地开发环境：

npm run dev

步骤 5：访问项目

启动成功后，终端会显示访问地址（通常是 http://localhost:5173/ 或 http://127.0.0.1:5173/），复制地址打开浏览器，就能看到 Vue 3 的默认项目页面了。

方式二：创建 Vue 2 项目（传统方案，维护旧项目常用）

Vue 2 推荐使用 vue-cli 脚手架，步骤如下：

步骤 1：全局安装 vue-cli

终端输入以下命令，全局安装 Vue 2 对应的脚手架（注意版本，@2 表示安装 Vue CLI 2 系列，如需 Vue CLI 3+ 兼容 Vue 2，可省略 @2，后续配置选择 Vue 2 即可）：

# 安装 Vue CLI（兼容 Vue 2 和 Vue 3，推荐）
npm install -g @vue/cli

# 如需指定 Vue CLI 2（仅支持 Vue 2）
# npm install -g vue-cli@2

步骤 2：创建 Vue 2 项目

输入以下命令，创建项目（项目名称自定义，例如 my-vue2-project）：

# 方式 1：图形化界面创建（新手友好，推荐）
vue ui

执行后会自动打开浏览器的 Vue 图形化配置页面，按照以下步骤操作：

  1. 左侧选择「创建」，选择项目保存路径，点击「在此创建新项目」。
  2. 输入项目名称，修改项目描述（可选），包管理器选择「npm」，点击「下一步」。
  3. 预设选择「手动」，点击「下一步」。
  4. 功能勾选「Babel」（代码转译，兼容低版本浏览器）和「ESLint」（代码规范），其他可选，点击「下一步」。
  5. 选择「Vue 2」版本，其他默认，点击「创建项目」，等待项目创建和依赖安装完成。
# 方式 2：终端命令行创建
vue create my-vue2-project

执行后终端会出现选项，选择「Manually select features」（手动选择功能），后续步骤和图形化界面类似，勾选 Babel、ESLint，选择 Vue 2 版本即可。

步骤 3：进入项目目录并启动开发服务器

项目创建完成后，终端输入以下命令：

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

# 启动本地开发环境
npm run serve

步骤 4：访问项目

启动成功后，终端会显示访问地址（通常是 http://localhost:8080/），复制地址打开浏览器，即可看到 Vue 2 的默认项目页面。

补充说明

  1. 项目目录结构：创建成功后，项目核心目录如下（新手重点关注）：
    • src/：项目源代码目录（写业务代码的地方）
      • components/：存放公共组件
      • App.vue：根组件
      • main.js：项目入口文件
    • package.json：项目依赖和脚本配置文件
  2. 停止开发服务器：在终端中按下 Ctrl + C 即可停止。
  3. 打包项目：项目开发完成后，输入 npm run build（Vue 3）或 npm run build（Vue 2），会生成 dist/ 目录，里面是可部署到服务器的静态文件。

总结

  1. 前置条件必须安装 Node.js，验证成功后再进行后续操作，国内建议更换淘宝镜像源。
  2. 新项目优先选择 Vue 3 + create-vue，操作更轻量化，符合官方趋势。
  3. 维护旧项目选择 Vue 2 + vue-cli，图形化界面 vue ui 对新手更友好。
  4. 核心命令：进入项目目录 cd 项目名、安装依赖 npm install、启动项目 npm run dev（Vue 3）/ npm run serve（Vue 2）。