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

前言

• 由于前端发展较快，很多以前的命令就不需要了。

• 现在（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 作为项目本地依赖安装，而不是全局安装。

安装使用步骤-简略版

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 盘）

更详细的设置教程可以看：https://www.cnblogs.com/sunshine233/p/14865991.html

新建目录：在安装目录 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、设置环境变量（可忽略）

更详细的设置教程可以看：https://www.cnblogs.com/sunshine233/p/14865991.html

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

（图片中是 G 盘）

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

等待项目下载完成

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

等待项目下载完成

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 

使用 脚手架 ·（也是 Vite 安装命令）

npm create vite@latest 

 

备注：

已安装 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 3	16.x / 18.x / 20.x（LTS）	<14.18.0	Vite 依赖高版本 Node.js
Vue 2	14.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 后重新安装依赖。