vue2开发环境搭建指南

搭建vue2开发环境

vue2开发环境搭建需要安装以下几种工具：

nvm （node版本管理器）
node (提供构建底层环境)
pnpm （插件包管理器）
vue cli （快速构建vue2项目的工具）

插件包管理器：npm、yarn、pnpm 怎么选？

包管理器用于下载 / 管理依赖（比如 Vue 核心库、插件），Node 自带 npm，但还有更优选择。

工具	优势	安装命令	常用命令（以安装 Vue 为例）
npm	内置无需额外安装，生态最广	Node 自带	npm install vue（安装）、npm run dev（运行）
yarn	速度比 npm 快，缓存机制更优	npm install -g yarn	yarn add vue、yarn dev
pnpm	速度最快，磁盘空间占用最少（共享依赖）	npm install -g pnpm	pnpm add vue、pnpm dev

推荐优先级：pnpm > yarn > npm（新项目优先用 pnpm，老项目跟随原有工具）。

安装nvm

Windows：访问https://nvm.uihtm.com/doc/download-nvm.html下载最近发布日期的版本就可以，解压后双击nvm-setup.exe开始安装。
Mac/Linux：终端执行 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash。

nvm-setup.exe安装比较简单，接受协议，一路next，什么都不必修改，文件夹路径都是默认不要动它否则可能出错，最后点击install，最后finish。

命令行执行nvm -v，会看到nvm的版本号

安装node

为什么选 LTS 版本？避免新版本的兼容性问题，多数企业生产环境也用 LTS 版。

bash 复制代码

# 命令行执行如下命令，安装node
nvm install 22.21.1 #期间不要关闭命令行窗口，否则出现问题。
# 一定要等到Installation complete.并出现nvm use 22.21.1的指令提示才算下载完成。

#下载完还不能直接使用，需要执行下面命令
nvm use 22.21.1 #告诉系统使用这个版本node

nvm其他常用命令一览

bash 复制代码

nvm list available  # 查看可安装的 Node 版本
nvm install 20.10.0 # 安装指定版本
nvm use 20.10.0     # 切换到指定版本
nvm list            # 查看已安装版本（带 * 的是当前使用版本）

安装vue cli

bash 复制代码

npm install -g @vue/cli --registry=https://registry.npmmirror.com #使用淘宝镜像源下载快

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

bash 复制代码

vue --version

创建Vue项目

bash 复制代码

# 创建项目（webapp 是项目名）,项目创建在当前所在文件夹，powershell打开默认在用户文件夹下
vue create webapp

关键配置项选择（按上下键移动，空格选中，回车确认）：

Preset：选 "Manually select features"（手动选择特性）。

Features：必选 Babel（语法转换，兼容旧浏览器）、Vue Router（路由）、Vuex（状态管理，Vue 3 可选 Pinia）、Linter / Formatter（代码检查）。

Vue 版本："3.x"对应Vue3、"2.x"对应Vue2。

ESLint 配置：选 "ESLint + Prettier"（配合前面的格式化工具）。

何时检查：选 "Lint on save"（保存时检查）。

配置文件位置：选 "In dedicated config files"（单独的配置文件，清晰）。

等待依赖安装完成，进入项目并启动：

bash 复制代码

cd webapp
npm run serve  # 启动开发服务器，默认地址 http://localhost:8080/

异常问题解决

问题现象

在 Windows powershell中运行 npm install 等命令时，出现以下错误：

bash 复制代码

npm : 无法加载文件 C:\nvm4w\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，
请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

问题原因

Windows PowerShell 默认的执行策略限制了脚本运行，出于安全考虑禁止执行未签名的脚本。

解决方案

永久修改执行策略（推荐）

1.右键以管理员身份运行 PowerShell

检查当前执行策略，下面命令复制到命令行

bash 复制代码

Get-ExecutionPolicy

如果显示 Restricted，说明需要修改策略。

复制下面命令，修改策略

bash 复制代码

Set-ExecutionPolicy RemoteSigned

4.确认修改

输入 Y（是）

验证设置

bash 复制代码

Get-ExecutionPolicy

应显示 RemoteSigned，表示设置成功。

执行策略说明：

Restricted 默认策略，不允许运行任何脚本安全级别最高

RemoteSigned 本地脚本可运行，远程脚本需签名（推荐）安全级别较高

Unrestricted 允许运行所有脚本，但会提示警告 ⚠️安全级别较低

Bypass 不阻止任何操作，不显示警告 ⛔ 安全级别最低

vue2开发环境搭建指南

目录

搭建vue2开发环境

安装nvm

安装node

安装vue cli

创建Vue项目

异常问题解决