Vue cli的正确安装方式

### 一、Vue CLI 脚手架安装教程 在开始安装 Vue CLI 脚手架之前，需要确保系统已经正确安装了 Node.js 和 npm。以下是详细的安装步骤： #### 1. 环境准备 确保 Node.js 和 npm 已经正确安装。可以通过以下命令检查版本： ```bash node -v npm -v ``` 如果未安装 Node.js 或 npm，可以从官网下载并安装[^2]。 #### 2. 安装 Vue CLI 使用 npm 全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 安装完成后，可以通过以下命令验证是否安装成功： ```bash vue --version ``` 如果显示版本号，则说明安装成功[^1]。 #### 3. 创建第一个 Vue 脚手架项目 通过以下命令创建一个新的 Vue 项目： ```bash vue create my-project ``` 在执行上述命令时，系统会提示选择预设配置或手动配置插件。根据需求选择即可。 #### 4. 启动开发服务器 进入项目目录并启动开发服务器： ```bash cd my-project npm run serve ``` 启动成功后，可以在浏览器中访问 `http://localhost:8080` 查看项目运行效果[^1]。 --- ### 二、常见问题与解决方案 #### 1. 安装速度慢 由于 npm 默认源在国外，可能会导致安装速度较慢。可以切换为国内镜像源以加速安装： ```bash npm config set registry https://registry.npmmirror.com ``` 验证是否切换成功： ```bash npm config get registry ``` 如果需要恢复默认源，可以执行以下命令： ```bash npm config set registry https://registry.npmjs.org/ ``` #### 2. 使用 cnpm 替代 npm 为了进一步提升安装速度，可以选择安装 cnpm： ```bash npm i -g cnpm --registry=https://registry.npmmirror.com ``` 之后可以通过 cnpm 替代 npm 进行安装： ```bash cnpm install -g @vue/cli ``` --- ### 三、注意事项 - 在安装 Vue CLI 时，确保网络环境稳定，避免因网络问题导致安装失败。 - 如果系统中已安装旧版本的 Vue CLI（如 vue-cli 2.x），建议先卸载旧版本再安装新版本： ```bash npm uninstall -g vue-cli npm install -g @vue/cli ``` - Vue CLI 自动配置 Webpack，简化了繁琐的手动配置过程，同时解决了版本兼容性问题。 ---