Vue-CLI 脚手架工程化开发

工程化开发模式概述

传统开发模式与工程化开发模式的本质区别

传统开发模式：
- 直接在 HTML 文件中通过 <script> 标签引入 Vue.js 等依赖；
- 编写的 JavaScript 和 CSS 代码即为浏览器最终运行的代码；
- 无构建过程，不支持现代前端语法特性（如 ES6+、单文件组件、预处理器等）。
工程化开发模式：
- 基于构建工具（如 Webpack、Vite）对源代码进行编译、转换和打包；
- 开发者编写的源代码并非浏览器直接可执行的代码；
- 构建工具负责将高级语法（如 import/export、async/await）、预处理器（如 Sass、Less）、单文件组件（.vue）等，转换为兼容目标浏览器的标准 JavaScript 和 CSS；
- 核心价值在于提升开发体验与代码质量，支持模块化、类型检查、热更新、代码分割等能力。

工程化开发面临的挑战

Webpack 等构建工具配置复杂，需手动编写大量 loader、plugin 及 resolve 规则；
不同项目间存在大量重复性基础配置（如 babel-loader、css-loader、vue-loader、less-loader 等）；
企业内部缺乏统一配置标准，导致团队成员需反复学习不同项目的构建逻辑；
新成员入职后需先理解项目构建体系，才能投入业务开发，显著增加上手成本；
配置维护难度高，升级依赖或调整构建行为易引发连锁问题。

Vue CLI：官方标准化脚手架工具

工具定位与核心特性

Vue CLI 是 Vue 官方提供的全局命令行工具，基于 Node.js 开发；
其核心目标是消除构建配置负担，提供开箱即用的标准化开发环境；
所有功能均通过 @vue/cli 包实现，安装后即可在任意目录执行相关命令；
标准化体现：
- 自动生成统一结构的项目目录；
- 内置 Webpack 4/5（Vue CLI 4+ 默认 Webpack 4，Vue CLI 5 支持 Webpack 5）、Babel、ESLint、PostCSS 等主流工具链；
- 自动处理 .vue 单文件组件、ES6+ 语法、CSS 预处理器（Sass/Less/Stylus）、TypeScript 等；
- 提供开发服务器（vue-cli-service serve），支持热重载（HMR）、按需编译、Source Map 等；
- 所有项目遵循相同约定，降低跨项目迁移与协作成本。

Vue CLI 的核心优势

零配置启动：无需手动编写 webpack.config.js 或 babel.config.js；
开箱即用：内置开发服务器、单元测试、端到端测试、代码检查、构建部署等完整能力；
可扩展性强：通过插件机制（Plugin API）支持定制化功能（如 PWA、TypeScript、Router、Vuex 集成）；
版本可控：CLI 本身与项目依赖解耦，可通过 vue upgrade 独立升级 CLI 版本；
社区生态完善：官方维护、文档详实、错误提示友好、问题响应及时。

注意：本教程基于 Vue 2 生态，默认使用 vue-cli-service 构建系统。Vue CLI 对 Vue 2 和 Vue 3 均提供支持，创建项目时需明确选择对应版本。

Vue CLI 使用全流程（四步法）

第一步：全局安装 Vue CLI

在具备 Node.js（≥ v8.9）及 npm（≥ v5.2）的环境中，以管理员权限执行以下命令：

1	npm install -g @vue/cli

或使用 yarn：

1	yarn global add @vue/cli

关键说明：

-g 表示全局安装，仅需执行一次；

@vue/cli 为正式包名，@ 符号与作用域不可省略；

安装过程需联网下载依赖，耗时依网络状况而定；

成功标志为终端输出 success installed 及具体耗时信息。

第二步：验证安装结果

执行以下命令确认 CLI 是否正确安装并查看当前版本：

1	vue --version

正常输出格式为 x.x.x（例如 5.0.9）；
若显示 command not found，请检查 Node.js 环境变量或重新以管理员身份运行终端；
Vue CLI 5.x 兼容 Vue 2 项目；历史版本（如 CLI 4.x）亦完全适用；
不同操作系统（Windows/macOS/Linux）及 Node.js 版本下，CLI 功能一致，仅版本号略有差异。

第三步：创建 Vue 2 项目

确定项目创建路径

在文件系统中导航至期望存放项目的目录（如桌面、用户文档等）；
关键原则：终端当前工作目录即为项目根目录生成位置；
推荐做法：新建专用文件夹（如 demo），并在该目录内打开终端。

执行创建命令

在目标目录下执行：

1	vue create vuedemo

vuedemo 为项目名称，必须为合法的 NPM 包名：
- 仅允许字母、数字、连字符（-）、下划线（_）；
- 禁止使用中文、空格、特殊符号；
- 建议采用小写字母加连字符的命名风格（如 my-project）。

选择预设配置

命令执行后将进入交互式菜单，提供以下选项：

Default (Vue 2)：默认 Vue 2 配置（推荐初学者选用）；
Default (Vue 3)：默认 Vue 3 配置；
Manually select features：手动选择特性（Router、Vuex、CSS 预处理器等）；
Use a preset from GitHub：从 GitHub 加载自定义预设。

本教程要求选择 Default (Vue 2)，确保项目基于 Vue 2 构建。

确认选择后，CLI 将自动下载模板、安装依赖、生成全部文件结构；
创建完成标志为终端输出 Successfully created project vuedemo. 及后续操作提示。

项目目录结构说明（Vue 2 默认）

创建完成后，vuedemo 目录包含以下核心内容：

package.json：定义项目元信息、依赖及脚本命令；
node_modules/：本地依赖包存储目录；
public/：静态资源目录（index.html 为应用入口）；
src/：源码主目录，含 main.js（应用入口）、App.vue（根组件）、components/（组件目录）；
babel.config.js：Babel 编译配置（已预设 Vue 2 兼容规则）；
vue.config.js（可选）：Vue CLI 专属配置文件（初始为空，按需添加）；
.gitignore、README.md 等辅助文件。

重要提示：所有文件均由 CLI 自动生成，开发者无需手动创建或修改基础结构。

第四步：启动开发服务器

进入项目目录

1	cd vuedemo

启动服务

执行以下任一命令（效果完全相同）：

1	npm run serve

或

1	yarn serve

注意：

serve 命令定义在 package.json 的 scripts 字段中：

1
2
3

"scripts": {
   "serve": "vue-cli-service serve"
}

vue-cli-service 是 CLI 提供的本地服务命令，封装了 Webpack Dev erver；启动成功后，终端将输出类似信息：

1
2
3

App running at:
    - Local:   http://localhost:8080/
    - Network: http://192.168.x.x:8080/

访问应用

打开浏览器，访问 http://localhost:8080；
页面显示 “Welcome to Your Vue.js App” 及大型 Vue Logo，表明项目运行成功；
修改 src/App.vue 中的内容，保存后浏览器将自动刷新（热重载），无需手动刷新页面。

关键概念解析与实践规范

`package.json` 中的脚本命令机制

scripts 字段定义了项目可执行的命令别名；
vue-cli-service 作为底层服务代理，根据脚本名调用对应功能模块；
常用命令说明：
- serve：启动开发服务器（对应 vue-cli-service serve）；
- build：构建生产环境包（对应 vue-cli-service build）；
- lint：执行代码风格检查（对应 vue-cli-service lint）；
企业级适配说明：
- 若团队将 serve 重命名为 dev，则启动命令变为 npm run dev；
- 开发者需始终查阅 package.json 的 scripts 字段，以确认实际可用命令；
- 创建命令 vue create 永远固定，不受项目内配置影响。

工程化开发的标准化意义

统一项目结构：所有由 Vue CLI 创建的项目具有相同目录布局与文件组织逻辑；
统一构建行为：Babel 转译目标、CSS 提取策略、资源路径处理等均由 CLI 统一管理；
统一开发体验：热重载、错误覆盖层、性能分析面板等功能开箱即用；
降低协作门槛：新成员克隆仓库后，仅需 npm install && npm run serve 即可启动；
保障长期可维护性：CLI 定期发布安全更新与兼容性补丁，项目可平滑升级。

Vue 2 工程化项目结构与运行流程详解

项目目录结构概览

Vue CLI 脚手架生成的项目采用标准化的工程化目录结构。该结构遵循前端开发最佳实践，兼顾可维护性、可扩展性与协作规范。以下为项目根目录下各主要文件及文件夹的职能说明：

node_modules/：第三方依赖包存储目录，由 npm install 或 yarn install 自动创建与管理。
public/：静态资源公开目录，其中存放的文件不会被 Webpack 处理，而是直接复制到构建输出目录（dist/）中。
src/：源代码主目录，所有业务逻辑、组件、样式及配置均在此编写，是开发者日常编码的核心区域。
.gitignore：Git 版本控制忽略配置文件，定义不纳入版本管理的文件与目录。
babel.config.js：Babel 配置文件，用于配置 JavaScript 语法降级规则，确保代码兼容目标浏览器环境。
.eslintrc.js：ESLint 配置文件，定义 JavaScript/JSX 代码风格与质量检查规则。
package.json：项目元数据与依赖管理核心文件，包含项目名称、版本、脚本命令（如 serve、build）、生产与开发依赖列表等。
README.md：项目说明文档，通常包含项目简介、安装步骤、使用方法等内容。
vue.config.js：Vue CLI 专属配置文件，用于覆盖默认 Webpack 配置，支持代理、别名、构建路径等高级定制。
yarn.lock（或 package-lock.json）：依赖版本锁定文件，确保不同环境中安装的依赖版本完全一致。

重要提示：无需记忆全部配置文件作用。实际开发中，仅在需要特定功能（如配置跨域代理、修改构建输出路径）时，按需查阅并修改对应配置文件即可。

核心运行文件解析

整个 Vue 2 工程化项目的启动与渲染依赖于三个关键文件，它们构成项目运行的最小闭环：

public/index.html
src/main.js
src/App.vue

`public/index.html` —— HTML 模板容器

该文件是应用的唯一 HTML 入口模板，其核心作用是为 Vue 实例提供一个挂载点（mounting point），而非承载业务模板逻辑。

文件内容精简，关键结构如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 网站图标、字符集、视口设置等 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<div id="app"></div> 是 Vue 实例的根容器节点，所有 Vue 渲染的内容将动态注入此节点内部。
<noscript> 标签提供对禁用 JavaScript 浏览器的友好提示，属兼容性设计，在现代开发中可忽略。
文件中不编写任何 Vue 模板语法（如 {{ message }}），亦不放置业务组件结构。其定位仅为静态容器。

`src/main.js` —— 应用入口文件

该文件是整个 Vue 应用的程序入口（Entry Point），Webpack 打包与开发服务器启动时首先执行此文件。其核心职责为：创建 Vue 实例，并将其挂载至 index.html 中的 #app 容器。

标准 main.js 内容及逐行解析如下：

// 1. 导入 Vue 核心库
import Vue from 'vue'

// 2. 导入根组件 App.vue
import App from './App.vue'

// 3. （可选）配置开发环境提示
Vue.config.productionTip = false

// 4. 创建 Vue 实例并挂载
new Vue({
  render: h => h(App)
}).$mount('#app')

关键知识点说明

render: h => h(App)
此为 Render 函数的简写形式，等价于：
1
2
3
render: function (createElement) {
return createElement(App)
}
其中 h 是 createElement 的别名（惯例命名），createElement 函数负责根据 App 组件定义，动态创建虚拟 DOM 节点（VNode）。
$mount('#app') 与 el: '#app' 的等价性
Vue 实例可通过两种方式指定挂载目标：
- 方式一（推荐，显式调用）：new Vue({ ... }).$mount('#app')
- 方式二（声明式）：new Vue({ el: '#app', ... })
  二者功能完全一致，均指定 Vue 实例管理 id="app" 的 DOM 元素。$mount() 方式更灵活，支持运行时动态挂载。
Vue.config.productionTip = false
该配置用于关闭 Vue 在开发模式下于浏览器控制台输出的启动提示信息。设为 true（默认）时，会显示 “You are running Vue in development mode…” 提示；设为 false 可使控制台更简洁。

`src/App.vue` —— 根组件（Root Component）

App.vue 是整个 Vue 应用的顶层组件，亦称“根组件”。所有其他业务组件均作为其子组件被组织与使用。其结构遵循 Vue 单文件组件（SFC）规范，包含 <template>、<script>、<style> 三部分。

标准 App.vue 示例：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template> 区域定义组件的HTML 结构与模板逻辑，支持指令（如 v-if、v-for）、插值表达式（{{ }}）及组件嵌套。
<script> 区域导出组件选项对象，定义组件行为，包括数据（data）、方法（methods）、计算属性（computed）、生命周期钩子及子组件注册（components）。
<style> 区域定义组件作用域内的 CSS 样式。添加 scoped 属性可实现样式局部化，避免全局污染。

核心结论：App.vue 是业务逻辑与 UI 结构的起点。开发者编写的全部页面内容，最终均由 main.js 通过 Render 函数驱动 App.vue 渲染，并注入 index.html 的 #app 容器中。

项目运行流程详解

Vue 2 工程化项目的启动与渲染遵循严格、可预测的执行顺序。理解此流程是掌握 Vue 应用工作原理的基础。

启动命令执行

在项目根目录执行 npm run serve（或 yarn serve）命令后，Vue CLI 启动开发服务器（基于 Webpack Dev Server）。该命令在 package.json 的 scripts 字段中定义：

1
2
3

"scripts": {
  "serve": "vue-cli-service serve"
}

运行时执行链路

Webpack 解析入口：Webpack 根据配置，以 src/main.js 为入口文件开始打包与依赖分析。
执行 main.js：
- 加载 vue 模块；
- 加载 ./App.vue 模块（经 vue-loader 编译为 JavaScript 对象）；
- 创建 Vue 实例，传入配置对象；
- 调用 $mount('#app')，将实例挂载至 public/index.html 中 id="app" 的 DOM 节点。
Vue 实例初始化：
- 解析 render 函数，调用 h(App)；
- h（即 createElement）依据 App.vue 的模板与逻辑，递归创建完整的虚拟 DOM 树；
- Vue 将此虚拟 DOM 树首次渲染（mount） 至真实 DOM 的 #app 节点内。
浏览器呈现：浏览器解析并绘制最终生成的 HTML 结构，用户看到应用界面。

流程图示（文字描述）

[执行 npm run serve]
        ↓
[Webpack 启动，加载入口 src/main.js]
        ↓
[main.js 执行：导入 Vue、导入 App.vue、创建 Vue 实例]
        ↓
[Vue 实例调用 $mount('#app')，触发 render 函数]
        ↓
[render 函数调用 h(App)，基于 App.vue 创建虚拟 DOM]
        ↓
[Vue 将虚拟 DOM 渲染（patch）至 index.html 的 #app 节点]
        ↓
[浏览器显示最终页面]

开发规范与最佳实践

为保障项目长期可维护性与团队协作效率，须严格遵守以下工程化开发规范：

项目打开方式

必须以项目根目录为工作区打开编辑器（如 VS Code）。
正确操作：在文件系统中定位至项目文件夹（如 my-vue-project/），右键选择 “Open with Code” 或在终端中执行 code .。
错误操作：在父级目录打开多个项目，或仅打开 src/ 子目录。此举将导致编辑器无法正确识别 package.json、node_modules 及各类配置文件，引发语法检查失效、依赖路径错误等问题。

目录职责边界

目录	职责	禁止行为
`public/`	存放不参与构建的静态资源（如 `favicon.ico`, `robots.txt`）	不得存放需被 Webpack 处理的资源（如图片、字体）；不得编写业务逻辑或模板
`src/assets/`	存放参与构建的静态资源（如 `logo.png`, `fonts/`）	不得存放组件、业务逻辑代码
`src/components/`	存放可复用的 Vue 组件（`.vue` 文件）	不得存放非组件文件（如工具函数、配置）
`src/App.vue`	作为应用根组件，组织顶层布局与路由出口（`<router-view>`）	不得承载具体业务页面逻辑，应通过子组件或路由组件实现

模板编写位置

所有 Vue 模板语法（插值、指令、组件引用）必须编写在 .vue 文件的 <template> 区域内，尤其是 App.vue 及其子组件。
public/index.html 中严禁编写任何 Vue 模板语法，其唯一作用是提供纯净的挂载容器。

总结

本节系统阐述了 Vue 2 工程化项目的标准目录结构与核心运行机制。关键结论归纳如下：

项目运行的三大基石：public/index.html（挂载容器）、src/main.js（入口与实例化）、src/App.vue（根组件与业务起点）。
渲染流程本质：main.js 创建 Vue 实例 → 实例通过 render 函数驱动 App.vue → App.vue 生成虚拟 DOM → Vue 将其渲染至 index.html 的 #app 节点。
工程化核心思想：关注点分离。HTML 模板、JavaScript 逻辑、CSS 样式分别置于 .vue 文件的 <template>、<script>、<style> 块中；静态资源按用途区分存放于 public/ 与 src/assets/；配置与依赖由标准化文件（package.json, vue.config.js）统一管理。

掌握此结构与流程，是进行 Vue 2 项目开发、调试与维护的前提。后续章节将基于此基础，深入讲解组件通信、路由管理、状态管理等核心能力。