Vue CLI 是 Vue.js 的命令行工具，用于快速搭建现代化的 Vue.js 应用程序。Vue CLI 3 是其最新的版本，引入了许多改进和优化，包括更快的项目初始化、更智能的配置以及开箱即用的插件系统。然而，有时由于项目需求或习惯，开发者可能需要同时使用 Vue CLI 2.x 版本。以下是如何在全球范围内安装 Vue CLI 3 并继续使用 Vue CLI 2.x 的详细步骤。
1. **卸载旧版本的 Vue CLI**：
在安装 Vue CLI 3 之前，首先需要确保没有全局安装旧版本（1.x 或 2.x）。这可以通过以下命令完成：
```
npm uninstall vue-cli -g
# 或者
yarn global remove vue-cli
```
2. **安装 Vue CLI 3**：
确保你的 Node.js 环境版本是 8.9 或更高，推荐使用 8.11.0+。你可以通过 nvm 或 nvm-windows 来管理不同版本的 Node.js。安装 Vue CLI 3 使用以下命令：
```
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
```
安装完成后，可以在命令行中输入 `vue` 查看帮助信息，以验证安装是否成功。另外，使用 `vue --version` 可以检查版本是否为 3.x。
3. **使用 Vue CLI 2.x 版本**：
Vue CLI 3 更新了包名，与 Vue CLI 2.x 共享 `vue` 命令，因此会覆盖旧版本的 `vue init` 功能。如果还需要使用 Vue CLI 2.x，可以全局安装一个桥接工具：
```
npm install -g @vue/cli-init
```
安装后，你将可以继续使用 `vue init` 命令，如 `vue init webpack my_project` 创建项目。
补充知识：在 Vue.js 中，`vue-router` 提供了导航守卫（navigation guards）功能，用于在路由切换时执行逻辑控制，例如验证用户登录状态。`router.beforeEach` 是一种全局前置守卫，通常用于处理权限验证。
以下是一个例子，展示了如何使用 `router.beforeEach` 防止未登录用户访问某些页面，但需要注意避免死循环的问题：
```javascript
router.beforeEach((to, from, next) => {
if (sessionStorage.getItem('loginData')) {
Toast('跳转成功');
next();
} else {
// 检查目标路径是否为登录页，以防止死循环
if (to.path === '/login') {
next();
} else {
next({ path: '/login' });
}
}
});
```
在这个示例中，当用户尝试访问受保护的页面且未登录时，`next({ path: '/login' })` 将会触发 `router.beforeEach`，如果没有额外的判断，会导致死循环。通过添加对目标路径的检查，我们确保在用户已处于登录页面时不会再次执行守卫逻辑，从而避免了死循环。
