海东市网站建设_网站建设公司_测试工程师_seo优化

Vue CLI 作为 Vue 官方提供的脚手架工具，是前端开发者高效搭建 Vue 项目、管理项目配置和扩展功能的核心利器。它简化了项目初始化流程，标准化了配置结构，还通过丰富的插件生态让项目扩展变得灵活可控。本文将从项目创建、核心配置文件解析、插件使用三大维度，全面拆解 Vue CLI 的使用方法，帮助你彻底掌握这一必备工具。

一、Vue CLI 基础：安装与项目创建

1. 环境准备

使用 Vue CLI 前，需确保本地已安装 Node.js（推荐 14.18+ 版本）和 npm/yarn。Node.js 自带 npm 包管理器，可通过以下命令验证安装：

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

2. 安装 Vue CLI

通过 npm 全局安装 Vue CLI（若已安装旧版本，需先卸载：npm uninstall -g vue-cli）：

npm install -g @vue/cli # 或使用 yarn yarn global add @vue/cli

安装完成后，验证版本：

vue --version # 简写：vue -V

3. 创建新项目

Vue CLI 提供两种创建方式：交互式命令行（推荐）和图形化界面，满足不同开发习惯。

方式 1：交互式命令行创建

执行以下命令，按提示完成项目配置：

vue create my-vue-project

关键配置项说明：

• 选择预设：可选择Default ([Vue 3] babel, eslint)（Vue 3 默认配置）、Default ([Vue 2] babel, eslint)（Vue 2 默认配置）或Manually select features（手动选择功能）。
• 手动选择功能（核心）：
  • Babel：语法转译（兼容低版本浏览器）；
  • TypeScript：支持 TypeScript 开发；
  • Progressive Web App (PWA)：PWA 应用支持；
  • Router：Vue 路由；
  • Vuex/Pinia：状态管理（Vue 3 推荐 Pinia）；
  • CSS Pre-processors：CSS 预处理器（Less/Sass/Scss/Stylus）；
  • Linter / Formatter：代码检查与格式化（ESLint + Prettier 等）；
  • Unit Testing：单元测试（Jest/Mocha）；
  • E2E Testing：端到端测试（Cypress/nightwatch）。
• 其他配置：
  • 选择 Vue 版本（2 或 3）；
  • 路由是否启用 history 模式；
  • CSS 预处理器类型；
  • ESLint 校验规则（如 Standard/Prettier）；
  • 校验时机（保存时 / 提交时）；
  • 配置文件存放位置（单独文件 / 合并到 package.json）；
  • 是否保存为预设（方便后续复用）。

方式 2：图形化界面创建

Vue CLI 提供可视化配置界面，操作更直观：

vue ui

执行后会自动打开浏览器（默认地址http://localhost:8000），按界面指引：

1. 点击「创建」→ 选择项目目录 → 输入项目名称；
2. 选择预设或手动配置功能（与命令行一致）；
3. 完成配置后点击「创建项目」，等待依赖安装完成。

4. 启动与预览项目

项目创建完成后，进入项目目录并启动开发服务器：

cd my-vue-project # 启动开发服务 npm run serve # 或 yarn serve

启动成功后，访问控制台输出的地址（如http://localhost:8080），即可看到 Vue 初始页面。

二、核心配置文件解析

Vue CLI 项目的配置分为「基础配置文件」和「自定义配置文件」，核心文件结构如下：

my-vue-project ├── node_modules # 项目依赖 ├── public # 静态资源（不会被 webpack 处理） │ ├── favicon.ico # 网站图标 │ └── index.html # 入口 HTML 文件 ├── src # 项目源码 │ ├── assets # 静态资源（会被 webpack 处理） │ ├── components # 公共组件 │ ├── router # 路由配置（可选） │ ├── store # 状态管理（可选） │ ├── views # 页面组件（可选） │ ├── App.vue # 根组件 │ └── main.js # 入口 JS 文件 ├── .eslintrc.js # ESLint 配置（可选） ├── .gitignore # Git 忽略文件 ├── babel.config.js # Babel 配置 ├── package.json # 项目依赖与脚本 ├── README.md # 项目说明 └── vue.config.js # Vue CLI 自定义配置（核心）

1. 核心配置文件：vue.config.js

这是 Vue CLI 最关键的自定义配置文件（默认不存在，需手动创建），用于覆盖默认配置，支持 webpack、devServer 等核心配置的自定义。以下是常用配置示例：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 基本路径（部署时的根路径） publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/', // 输出目录（打包后的文件夹） outputDir: 'dist', // 静态资源目录（相对于 outputDir） assetsDir: 'assets', // 是否开启源码映射（生产环境建议关闭） productionSourceMap: false, // 开发服务器配置 devServer: { port: 8081, // 端口号 open: true, // 自动打开浏览器 proxy: { // 接口代理（解决跨域） '/api': { target: 'http://localhost:3000', // 后端接口地址 changeOrigin: true, // 开启跨域 pathRewrite: { '^/api': '' } // 重写路径 } } }, // CSS 相关配置 css: { loaderOptions: { // 全局注入 SCSS 变量 scss: { additionalData: `@import "@/assets/styles/variables.scss";` } } }, // webpack 配置（链式操作） chainWebpack: config => { // 配置别名 config.resolve.alias .set('@', resolve('src')) .set('components', resolve('src/components')) // 移除 prefetch 插件（减少首屏加载资源） config.plugins.delete('prefetch') }, // webpack 配置（直接修改） configureWebpack: { plugins: [ // 自定义 webpack 插件 ], resolve: { extensions: ['.js', '.vue', '.json', '.ts'] } } }) // 辅助函数：路径解析 function resolve(dir) { return require('path').join(__dirname, dir) }

2. 其他关键配置文件

• babel.config.js：Babel 转译配置，默认已适配 Vue 语法，可自定义预设（如@babel/preset-env）和插件；
• package.json：管理项目依赖（dependencies生产依赖、devDependencies开发依赖）和脚本（serve/build/lint等）；
• .eslintrc.js：ESLint 代码校验规则配置，可自定义规则、忽略文件（.eslintignore）；
• public/index.html：项目入口 HTML，可通过<%= htmlWebpackPlugin.options.title %>动态注入标题。

三、Vue CLI 插件使用：扩展项目功能

Vue CLI 的插件生态是其核心优势，插件可快速集成第三方功能（如 UI 库、路由、状态管理、自动化部署等），支持「项目创建时安装」和「项目创建后手动安装」。

1. 插件的基本使用方式

方式 1：创建项目时安装

在交互式命令行中选择「Manually select features」，即可勾选所需插件（如 Router、Vuex、ESLint 等），Vue CLI 会自动完成安装和配置。

方式 2：项目创建后安装

通过vue add命令安装官方 / 社区插件，示例：

# 安装 Vue Router 插件 vue add router # 安装 Vuex 插件（Vue 3 推荐 Pinia，需手动安装：npm install pinia） vue add vuex # 安装 Element Plus 插件（Vue 3 UI 库） vue add element-plus # 安装 ESLint 插件 vue add eslint

2. 常用插件示例

（1）UI 库插件：Element Plus

安装后，Vue CLI 会自动配置按需引入 / 全局引入，无需手动修改 main.js：

vue add element-plus

安装时会提示：

• 选择引入方式：Fully import（全局引入）/按需引入；
• 是否配置主题：Yes/No。

（2）PWA 插件：@vue/cli-plugin-pwa

实现网页离线访问、添加到桌面等 PWA 特性：

vue add pwa

安装后会自动生成src/registerServiceWorker.js，并在public目录添加 PWA 图标和配置文件，只需在vue.config.js中配置 PWA 选项：

module.exports = defineConfig({ pwa: { name: 'My Vue App', shortName: 'Vue App', manifestOptions: { display: 'standalone' } } })

（3）TypeScript 插件：@vue/cli-plugin-typescript

为项目添加 TypeScript 支持：

vue add typescript

安装后会自动生成tsconfig.json，并将main.js改为main.ts，同时修改组件后缀为.vue+ TypeScript 语法（如<script setup lang="ts">）。

3. 自定义插件（进阶）

若社区插件无法满足需求，可开发自定义 Vue CLI 插件。插件本质是一个包含generator.js（生成文件）和index.js（注册命令 / 修改配置）的 npm 包，核心步骤：

1. 创建插件目录结构：

my-vue-plugin ├── generator.js # 生成文件（如配置、组件） ├── index.js # 插件入口 └── package.json # 插件配置

1. 在generator.js中定义文件生成逻辑：

module.exports = (api, options, rootOptions) => { // 向 src 目录添加自定义组件 api.render('./template', { name: options.name }) // 修改 package.json，添加依赖 api.extendPackage({ dependencies: { 'my-dependency': '^1.0.0' } }) }

1. 发布插件到 npm，然后通过vue add my-vue-plugin安装使用。

四、Vue CLI 进阶技巧

1. 环境变量配置：创建.env.development（开发环境）、.env.production（生产环境）文件，定义环境变量（以VUE_APP_开头），如VUE_APP_API_BASE_URL=http://localhost:3000，在代码中通过process.env.VUE_APP_API_BASE_URL访问；
2. 多环境打包：在package.json中配置脚本，如"build:test": "vue-cli-service build --mode test"，对应.env.test配置文件；
3. 清除缓存：若配置修改不生效，执行vue-cli-service clear清除缓存；
4. 升级 Vue CLI：执行npm update -g @vue/cli升级全局 CLI，项目内执行vue upgrade升级项目依赖的插件。

五、总结

Vue CLI 从项目初始化、配置管理到插件扩展，为 Vue 项目提供了一站式的工程化解决方案。掌握项目创建的两种方式，理解vue.config.js的核心配置，灵活运用插件扩展功能，能大幅提升 Vue 项目的开发效率和可维护性。

随着 Vue 3 和 Vite 的普及，Vue CLI 虽不再是唯一选择，但在中大型项目、团队标准化开发场景中仍有不可替代的优势。结合本文的配置示例和插件使用方法，你可以快速搭建符合业务需求的 Vue 项目架构。