异常教程

vue cli安装（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，Vue.js 作为最受欢迎的框架之一，其高效开发体验离不开工具链的支持。Vue CLI（Command Line Interface）作为 Vue 官方提供的脚手架工具，能够快速构建开发环境、配置构建流程，并集成多种插件，大幅降低开发者的学习成本。然而，对于编程初学者而言，如何正确安装和配置 Vue CLI 可能是一个挑战。本文将从零开始，逐步讲解 Vue CLI 的安装流程、配置方法、常见问题及实战案例，帮助开发者建立扎实的项目开发基础。

一、Vue CLI 的核心作用与安装前提

1.1 为什么需要 Vue CLI？

Vue CLI 可以类比为“前端开发的乐高积木”，它通过预设的配置模板（如 Webpack、Babel、ESLint 等）和插件机制，让开发者无需手动搭建复杂的开发环境。例如，一个完整的 Vue 项目需要处理模块化、代码转译、样式处理、热更新等任务，而 Vue CLI 可以将这些步骤自动化，开发者只需关注业务逻辑。

1.2 安装前的环境准备

在安装 Vue CLI 之前，需确保本地已安装以下工具：

  • Node.js：Vue CLI 依赖 Node.js 运行，建议版本在 v14.18.0 或更高（可通过 node -v 查看版本）。
  • npm 或 yarn：作为包管理工具，Vue CLI 的安装和插件管理均通过它们完成。

验证环境命令示例：

node -v  # 查看 Node.js 版本  
npm -v   # 查看 npm 版本

二、Vue CLI 的安装流程

2.1 全局安装 VS 局部安装

Vue CLI 可通过两种方式安装：

  1. 全局安装：直接通过 npm install -g @vue/cli 安装到系统环境，允许在任意目录通过 vue 命令创建项目。
  2. 局部安装：在项目目录中通过 npm install @vue/cli --save-dev 安装，仅限当前项目使用。

推荐选择全局安装，因其灵活性更高，适合长期开发需求。

2.2 全局安装步骤

npm install -g @vue/cli  

npm install -g @vue/cli --force

安装完成后验证：

vue --version  # 查看 Vue CLI 版本

2.3 安装过程中常见问题及解决方案

  • 权限不足：在 Linux/macOS 系统中，全局安装可能因权限问题失败。可尝试在命令前添加 sudo，或通过 nvm 管理 Node.js 环境。
  • 网络问题：国内用户可通过配置 npm 镜像加速安装，例如： 
    npm config set registry https://registry.npmmirror.com

三、通过 Vue CLI 创建项目

3.1 交互式创建项目

安装完成后，执行 vue create 命令，进入交互式配置界面：

vue create my-project

系统会提示选择以下内容：

  • 项目名称：默认为当前目录名称，可自定义。
  • 预设配置：选择官方预设（如默认、Babel、Router 等）或手动选择特性。
  • Vue 版本：选择 Vue 2.x 或 3.x（需注意版本差异）。

示例选择流程：

? Please pick a preset:  
> Default ([Vue 2] babel, eslint)  
  Default (Vue 3)  
  Manually select features

3.2 快速创建项目（非交互模式）

若已熟悉配置需求，可通过以下命令快速生成项目：

vue create my-project --default

四、Vue CLI 的配置与扩展

4.1 项目配置文件解析

创建项目后，核心配置文件位于 vue.config.js。通过该文件可自定义：

  • 输出路径：outputDir 指定打包文件存放目录。
  • 静态资源路径：publicPath 控制静态资源的请求路径。
  • 插件配置：如 chainWebpack 或 configureWebpack 自定义 Webpack 配置。

示例配置：

module.exports = {  
  outputDir: 'dist',  
  publicPath: './',  
  chainWebpack: config => {  
    config.module  
      .rule('vue')  
      .use('vue-loader')  
      .loader('vue-loader')  
      .tap(options => {  
        return { ...options, compilerOptions: { whitespace: 'preserve' } };  
      });  
  },  
};

4.2 插件化扩展功能

Vue CLI 通过插件机制增强功能。例如：

  • @vue/cli-plugin-router：集成 Vue Router。
  • @vue/cli-plugin-eslint：启用代码规范检查。

安装插件命令：

vue add router

五、实战案例：从安装到部署

5.1 案例背景

假设需开发一个包含路由和 API 请求的 Vue 项目，需完成以下步骤：

  1. 安装 Vue CLI 并创建项目。
  2. 添加路由插件。
  3. 配置代理解决跨域问题。
  4. 打包部署。

5.2 详细步骤

步骤 1：安装并创建项目

vue create vue-demo  
cd vue-demo

步骤 2：添加路由插件

vue add router

步骤 3：配置代理
在 vue.config.js 中添加：

devServer: {  
  proxy: {  
    '/api': {  
      target: 'http://localhost:3000',  
      changeOrigin: true,  
      pathRewrite: { '^/api': '' },  
    },  
  },  
},

步骤 4：打包部署

npm run build  # 生成打包文件到 dist 目录

六、常见问题与解决方案

6.1 安装过程中卡在下载依赖

原因：可能是网络不稳定或镜像源失效。
解决方案：

npm cache clean --force  
npm install -g @vue/cli --registry=https://registry.npmmirror.com

6.2 创建项目后命令失效

原因：可能因未安装项目依赖或路径配置错误。
解决方案：

npm install  # 安装项目依赖  
npm run serve  # 启动开发服务器

七、进阶技巧与最佳实践

7.1 使用 Vue CLI 4+ 的全新架构

Vue CLI 4 引入了 插件工作空间 和 渐进式 CLI，允许通过 vue create 或 vue add 灵活扩展功能。开发者可结合 @vue/cli-service-global 实现全局服务配置。

7.2 自定义构建工具链

若需深度定制构建流程，可通过以下方式扩展：

  • 自定义 Webpack 配置：在 vue.config.js 中通过 chainWebpack 或 configureWebpack 修改规则。
  • 集成第三方插件：例如 compression-webpack-plugin 压缩资源。

八、总结与展望

通过本文，开发者已掌握 Vue CLI 的安装、配置、扩展及问题排查方法。随着 Vue.js 生态的持续发展，Vue CLI 不仅简化了开发流程，还为探索更复杂的开发场景（如微前端、TypeScript 集成）提供了坚实基础。建议读者在实践过程中结合官方文档，逐步深入理解工具链的设计原理，从而提升开发效率与代码质量。

本文通过循序渐进的讲解，帮助开发者建立从安装到实战的完整认知，助力快速上手 Vue 开发。如需进一步学习，可参考 Vue 官方文档或深入研究 Webpack 配置原理。

最新发布

查看更多文章