惊蛰

外观

vue2、vue3以及相关脚手架之间的关系

约 2158 字大约 7 分钟

2025-08-08

前言

  • 由于前端发展较快，很多以前的命令就不需要了。
  • 现在（2025/08/08）不需要先安装 vue2、vue3 了，直接用脚手架就可以创建项目。
  • 创建项目的命令曾经用过 npm init name ，现在推荐用 npm create
  • 除了 Node.js，本文提到的工具都是最新版本或者较新版本。
  • Vue2 推荐 Node.js 版本 16.x（LTS）, Vue3 推荐 Node.js 版本 16.x / 18.x / 20.x（LTS）

安装命令

Node.js

1. 官网下载安装包，然后双击安装
2. 默认安装位置为 C 盘， 最好修改安装位置到其它盘

Vue-cli

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。 你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

npm install -g @vue/cli

create-vue

// 这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
npm create vue@latest

Vite

// 也是 Vite 安装命令
npm create vite@latest

查看版本命令

Node.js

node -v

npm

Node.js 内置 npm

npm -v

Vue-cli

vue -V

Vue

npm list vue

本地环境

C:\Users\Administrator>node -v
v22.15.1

C:\Users\Administrator>npm -v
10.9.2

C:\Users\Administrator>vue -V
@vue/cli 5.0.8


C:\Users\Administrator>npm list vue
Administrator@ C:\Users\Administrator
`-- (empty)

全局运行 npm list vue 显示 (empty) 时，这表示 没有在全局范围安装 Vue 包。

因为 Vue 官方推荐将 Vue 作为项目本地依赖安装，而不是全局安装。

在项目中运行npm list vue

D:\code_working\huanchen-integrated-system>npm list vue
renren-ui@5.2.0 D:\code_working\huanchen-integrated-system
+-- element-ui@2.15.8
| `-- vue@2.6.11 deduped
+-- vue-cron@1.0.9
| `-- vue@2.6.11 deduped
+-- vue@2.6.11
`-- vuex@3.5.1
  `-- vue@2.6.11 deduped
术语含义重要性
deduped表示依赖去重，多个包共享同一个依赖实例避免重复安装，减少包体积
vue@2.6.11项目使用的 Vue 具体版本Vue 2.6 的最新补丁版本
直接依赖在 package.json 中明确声明的依赖项目运行的核心依赖
间接依赖通过其他依赖引入的依赖（如 element-ui 引入的 vue）npm 自动管理

这个输出表明您的项目依赖关系健康，所有 Vue 相关包都统一使用 vue@2.6.11，没有版本冲突问题。

安装使用步骤-简略版

  1. 安装 Node.js
  2. 设置 npm 的全局下载路径和缓存路径（可忽略，默认下载到 c 盘）
  3. 设置环境变量（可忽略）
  4. 配置 npm 镜像源
  5. 安装 vue-cli
  6. 创建 Vue2 / Vue3 项目
  7. 运行 Vue2 / Vue3 项目

安装使用步骤-详细版

1、安装 Node.js

官网下载安装包，双击运行安装，修改安装目录到 D 盘（不是 C 盘即可）

检测是否安装成功：node -v

C:\Users\Administrator>node -v
v22.15.1

提示

  • Node.js 18- 支持 vue2
  • Node.js 18+ 支持 vue3
  • Node.js 中自带 npm

2、设置 npm 的全局下载路径和缓存路径（可忽略，默认下载到 c 盘）

更详细的设置教程可以看: vue-cli 的安装步骤

新建目录：在安装目录 D:\Program Files\nodejs 下手动新建 node_cache 和 node_global 文件夹

在　D:\Program Files\nodejs下输入cmd进入终端，调整目录

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

提示

npm（node package manager）：nodejs 的包管理器，用于 node 插件管理（包括安装、卸载、管理依赖等）

3、设置环境变量（可忽略）

更详细的设置教程可以看: vue-cli 的安装步骤

“环境变量 | 系统变量 | Path | 编辑 | 新建 | 复制粘贴 D:\Program Files\nodejs\node_global”

alt text

4、配置 npm 镜像源

  # 查询当前使用的镜像源
  npm get registry
  # 设置为淘宝镜像源
  npm config set registry https://registry.npmmirror.com/

  # 还原为官方镜像源
  npm config set registry https://registry.npmjs.com/

官方源地址网速慢，淘宝镜像源地址网速快。

5、安装 vue-cli

用 npm 安装：npm install -g @vue/cli

检测是否安装成功：vue -V 

C:\Users\admin>vue -V
@vue/cli 5.0.8

提示

  • vue-cli（Vue CLI）是一个脚手架工具，它本身不绑定特定的 Vue 版本。当你运行 vue create 时，它会根据你的选择（Vue 2 或 Vue 3）自动安装对应版本的 vue 依赖。
  • vue-cli 脚手架版本 4.5 以上对应的才是 vue3
  • Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。
  • vue -V 是大写 V，也可以用 vue --version 查询

6、创建 Vue2 / Vue3 项目

创建 vue2 项目（vue-cli）

在终端输入：vue create project-name

选择 vue2 ：

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

alt text

等待项目下载完成

E:\a-test-vue>vue create hello

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)

Vue CLI v5.0.8
✨  Creating project in E:\a-test-vue\hello.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 829 packages in 1m

105 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...

added 85 packages in 15s

117 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project hello.
👉  Get started with the following commands:

 $ cd hello
 $ npm run serve

提示

用 vue-cli 创建项目时， vue2 项目和 vue3 项目命令一样，要自己手动选择 vue2 或者 vue3

创建 vue3 项目

用脚手架 vue-cli 创建项目 （基于 webpack）

在终端输入：vue create project-name

选择 vue3 ：

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features

alt text

等待项目下载完成

E:\a-test-vue>vue create hello

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.8
✨  Creating project in E:\a-test-vue\hello.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 829 packages in 1m

105 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...

added 85 packages in 15s

117 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project hello.
👉  Get started with the following commands:

 $ cd hello
 $ npm run serve

提示

用 vue-cli 创建项目时， vue2 项目和 vue3 项目命令一样，要自己手动选择 vue2 或者 vue3

使用 脚手架 create-vue （基于 vite）
npm create vue@latest

alt text

使用 脚手架 Vite（也是 Vite 安装命令）
npm create vite@latest

alt text

alt text

提示

  • 已安装 18.3 或更高版本的 Node.js
  • 官方脚手架：create-vue

7、运行项目

Vue2 项目

  • vue-cli 创建的项目：npm run serve

Vue3 项目

  • vue-cli 创建的项目：npm run serve

  • create-vue 、vite 创建的项目：npm run dev

附录：deepseek 的回答

关于 Node.js 版本与 Vue 2/Vue 3 项目的兼容性问题，以下是详细解答：

1. Node.js 14 能否运行 Vue 3 项目？

  • Vue 3 的最低要求：
    Vue 3 官方要求 Node.js 版本至少为 14.18.0（或 16+），否则可能无法正常运行。
    • 问题示例：
      如果使用 Node.js 14.15.1 运行 Vue 3 项目，可能会报错 Cannot find module 'node:url'，因为 Vite（Vue 3 默认构建工具）依赖 Node.js 14.18+。
    • 解决方案：
      升级 Node.js 至 16.x 或 18.x（推荐 LTS 版本），或至少升级到 14.18.0。

2. Node.js 22 能否直接运行 Vue 2 项目？

  • Vue 2 的兼容性问题：
    Node.js 22 默认使用 OpenSSL 3.0，而 Vue 2 的旧工具链（如 vue-cli-service）依赖的 node-sass 或 Webpack 4 可能不兼容，导致以下问题：

    1. 安装失败：npm install 报错，因为某些依赖（如 node-sass）仅支持低版本 Node.js。
    2. 启动失败：运行 npm run dev 时报错，提示 OpenSSL 相关限制。

  • 解决方案：

    • 方法 1：修改 package.json，添加 OpenSSL 回退选项：

      "scripts": {
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
  "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
}

    • 方法 2：降级 Node.js 至 16.x 或 14.x（推荐 LTS 版本）。

    • 方法 3：替换 node-sass 为 sass（Dart Sass），并修改代码中的 ::v-deep 语法。

3. 版本兼容性总结

项目类型推荐 Node.js 版本不兼容版本关键问题
Vue 316.x / 18.x / 20.x（LTS）<14.18.0Vite 依赖高版本 Node.js
Vue 214.x / 16.x（LTS）≥18.x（需配置）OpenSSL 3.0 限制

4. 最佳实践建议

  1. 使用版本管理工具（如 nvm）：

    nvm install 16.20.2  # Vue 2 推荐
nvm install 20.12.0  # Vue 3 推荐

  2. 升级 Vue 2 项目：

    • 将 Vue 2 升级到最新 2.7.x 版本（兼容性更好）。
    • 逐步迁移到 Vite（需使用 @vitejs/plugin-vue2）。

  3. 检查构建工具：

    • Vue 3 优先使用 Vite，Vue 2 可保留 Webpack 4（需锁定 Node.js 版本）。

5. 常见问题示例

  • Vue 3 报错 Cannot find module 'node:url'：
    原因：Node.js 版本低于 14.18.0，升级即可。
  • Vue 2 在 Node.js 18+ 启动失败：
    原因：OpenSSL 3.0 限制，需添加 --openssl-legacy-provider。

如需进一步调试，可删除 node_modules 和 package-lock.json 后重新安装依赖。