2018年Vue2.x零基础5小时快速入门实战视频教程（含Vuex、MintUI、ElementUI）-elementui-CSS教程网

本文还有配套的精品资源，点击获取

简介：本教程专为Vue.js初学者设计，围绕Vue2.x版本系统讲解前端开发核心技能，涵盖环境搭建、数据绑定、事件处理、组件化开发、生命周期、模块化封装及数据持久化等基础知识。课程结合实战案例，深入介绍如何使用vue-resource发起HTTP请求，并集成Vuex实现状态管理，利用MintUI与ElementUI构建现代化用户界面。通过完整的学习路径，帮助开发者在短时间内掌握Vue2.x全栈开发能力，快速上手企业级项目开发。
2018年Vue2.x 5小时入门视频教程-包括Vuex、MintUi、ElementUi基础教程-01.zip

1. Vue2.x环境搭建与项目初始化

在前端工程化日益成熟的今天，Vue.js作为一款渐进式JavaScript框架，凭借其简洁的API设计和高效的开发体验，迅速成为主流前端技术之一。本章将从零开始构建一个基于Vue2.x的开发环境。

首先，确保已安装 Node.js （建议 v14~v16）及包管理工具 npm 或 yarn 。通过以下命令验证安装：

node -v && npm -v

接着全局安装 Vue CLI 脚手架：

npm install -g @vue/cli@^2.0.0  # Vue2 项目推荐使用 CLI 2.x

然后创建项目：

vue init webpack my-vue2-project

按提示选择 Vue2 模板并完成初始化。项目结构生成后，执行：

cd my-vue2-project && npm run dev

即可启动开发服务器（默认 http://localhost:8080 ），进入开发调试阶段。

核心文件说明如下：

文件	作用
`main.js`	入口文件，创建 Vue 实例并挂载到 DOM
`App.vue`	根组件，包含应用整体结构
`index.html`	页面模板，webpack 打包注入资源

此外，可通过修改 webpack.config.js 进行别名配置、CSS 提取等基础优化，为后续开发奠定稳定基础。

2. Vue数据绑定机制解析与实践应用

Vue.js 的核心优势之一在于其强大的数据绑定能力，它通过响应式系统实现了视图与数据的自动同步。这种“声明式”编程模型极大降低了开发者手动操作 DOM 的复杂度，使得前端开发更加高效、直观。深入理解 Vue 2.x 中的数据绑定机制，不仅有助于编写更可靠的代码，还能在性能优化和调试过程中提供关键支持。本章将从底层原理出发，逐步剖析 Vue 响应式的实现方式，并结合实际场景展示插值表达式、属性绑定、样式控制等常用技术的应用技巧。

2.1 Vue响应式系统的核心原理

Vue 2.x 的响应式系统基于 Object.defineProperty 实现，通过对对象属性进行劫持，在数据读取和修改时自动触发依赖收集与更新通知。这一机制构成了 Vue 数据驱动视图更新的基础逻辑。为了全面掌握其工作流程，需深入分析三个核心环节：数据劫持、依赖收集与Watcher机制、以及虚拟DOM如何与响应式系统协同工作。

2.1.1 数据劫持与Object.defineProperty实现机制

Vue 在初始化阶段会对 data 中的所有属性进行递归遍历，并使用 Object.defineProperty 将其转换为 getter/setter 形式，从而实现对属性访问和赋值的拦截。这一步被称为“数据劫持”，是整个响应式系统的起点。

function defineReactive(obj, key, val) {
  // 递归处理嵌套对象
  observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`读取属性 ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log(`设置属性 ${key} 为 ${newVal}`);
      val = newVal;
      // 触发视图更新（简化版）
      updateView();
    }
  });
}

function observe(data) {
  if (!data || typeof data !== 'object') return;
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}

代码逻辑逐行解读：

第 1 行定义 defineReactive 函数，用于将对象的某个属性转为响应式。
第 4 行调用 observe(val) ，确保嵌套对象也能被监听，形成递归观察。
第 6–15 行使用 Object.defineProperty 定义属性描述符：
enumerable 和 configurable 设置为 true，允许枚举和配置；
get() 拦截属性读取，输出日志并返回当前值；
set() 拦截属性写入，若新旧值不同则更新值并调用 updateView() 模拟视图刷新。
第 17–21 行 observe 函数遍历对象所有可枚举属性，依次调用 defineReactive 。

该机制虽然有效，但也存在局限性：

限制类型	具体表现	解决方案
新增/删除属性无法监听	使用 `$set` 或 `Vue.set()` 手动添加响应式属性	`this.$set(this.obj, 'newProp', value)`
数组索引直接赋值不触发更新	如 `arr[0] = newValue` 不会触发 setter	改用 `splice` 或 `$set`
对象整体替换需重新观测	若 `obj = { ... }` ，原响应式丢失	需重新绑定或使用 Vuex 管理状态

参数说明：
- obj : 要劫持的对象；
- key : 属性名；
- val : 初始值；
- updateView() : 模拟视图更新函数，实际中由 Watcher 触发 patch 过程。

尽管 Object.defineProperty 提供了细粒度的控制能力，但其静态特性导致必须预先遍历所有属性才能建立监听关系，这也是 Vue 3 改用 Proxy 的根本原因。

graph TD
    A[初始化data对象] --> B{遍历每个属性}
    B --> C[调用Object.defineProperty]
    C --> D[定义getter/setter]
    D --> E[getter中收集依赖]
    D --> F[setter中派发更新]
    F --> G[通知Watcher更新]
    G --> H[执行render函数重新生成VNode]
    H --> I[Diff算法对比新旧树]
    I --> J[局部更新真实DOM]

上述流程图清晰地展示了从数据变化到视图更新的完整链路。其中， getter 被触发时会将当前正在渲染的 Watcher 记录下来，形成“依赖”；而当 setter 被调用时，则会通知所有依赖此属性的 Watcher 进行更新。

2.1.2 依赖收集与Watcher更新机制详解

在 Vue 中，每一个组件实例都对应一个 Watcher 实例，负责监听其所依赖的数据变化并触发重新渲染。这个过程涉及两个关键角色：Dep（依赖）和 Watcher（观察者），二者共同构成经典的发布-订阅模式。

当组件首次渲染时，模板中的表达式会触发 data 属性的 getter，此时 Vue 会将当前活跃的 Watcher 添加到该属性对应的 Dep 中——这就是“依赖收集”。之后，一旦该属性被修改，其 setter 就会通知 Dep，进而通知所有注册的 Watcher 执行更新。

class Dep {
  constructor() {
    this.subs = []; // 存储订阅者（Watcher）
  }

  addSub(watcher) {
    this.subs.push(watcher);
  }

  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}

let uid = 0;
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.cb = cb;
    this.id = ++uid;
    this.deps = [];
    this.depIds = new Set();

    // 将expOrFn转为getter函数
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      this.getter = function() {
        return vm[expOrFn];
      };
    }

    this.value = this.get(); // 初始化时触发依赖收集
  }

  get() {
    Dep.target = this; // 设置当前活跃Watcher
    const value = this.getter.call(this.vm); // 触发getter，触发依赖收集
    Dep.target = null; // 清除目标
    return value;
  }

  addDep(dep) {
    const id = dep.id;
    if (!this.depIds.has(id)) {
      this.depIds.add(id);
      this.deps.push(dep);
      dep.addSub(this);
    }
  }

  update() {
    const oldValue = this.value;
    this.value = this.get(); // 重新求值
    this.cb.call(this.vm, this.value, oldValue); // 回调通知视图更新
  }
}

代码逻辑逐行解读：

Dep 类维护一个 subs 数组，存储所有订阅该依赖的 Watcher；
addSub 添加 Watcher 到列表；
notify 遍历所有 Watcher 并调用其 update() 方法；
Watcher 构造函数接收 Vue 实例、表达式或函数、回调函数；
get() 方法中先设置全局 Dep.target 为当前 Watcher，再执行 getter 触发数据读取；
在 defineReactive 的 getter 中判断是否存在 Dep.target ，若有则调用 dep.depend() 收集依赖；
addDep() 防止重复添加相同依赖；
update() 在数据变化后重新计算值并调用回调。

为了配合上述机制， defineReactive 需要增强如下：

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性拥有自己的Dep
  observe(val);

  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend(); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal); // 如果新值是对象，也需要变成响应式
      dep.notify(); // 通知所有Watcher更新
    }
  });
}

参数说明：
- Dep.target : 当前正在求值的 Watcher，全局唯一；
- dep.depend() : 将当前 Watcher 添加到 Dep 中；
- observe(newVal) : 处理新赋值的对象也为响应式；
- dep.notify() : 派发更新事件。

该机制保证了只有真正被使用的数据才会被监听，避免无效开销。例如，在模板中未引用的字段不会参与依赖收集，提升了运行效率。

2.1.3 虚拟DOM与渲染函数的自动追踪

Vue 的模板最终会被编译成 render 函数，该函数返回一个虚拟 DOM 树（VNode）。在首次渲染时， render 函数执行过程中会访问 data 中的属性，从而触发它们的 getter，完成依赖收集。当下次数据变更时，Watcher 会重新执行 render 函数生成新的 VNode 树，然后通过 Diff 算法比对新旧树，得出最小化的真实 DOM 操作指令。

以下是一个典型的 render 函数示例：

vm.$options.render = function(h) {
  return h('div', [
    h('p', `姓名：${this.name}`),
    h('p', `年龄：${this.age}`)
  ]);
};

当这个函数执行时， this.name 和 this.age 被读取，触发各自的 getter，此时如果存在活跃的 Watcher（即组件的渲染 Watcher），就会被记录进这些属性的 Dep 中。

随后，当执行 vm.name = '李四' 时，setter 被触发，调用 dep.notify() ，通知 Watcher 更新。Watcher 执行 update() 方法，重新调用 render 函数生成新的 VNode，并与旧树进行 Diff：

步骤	操作内容	说明
1	执行 render 函数	获取最新的 VNode 树
2	Diff 新旧 VNode 树	比较节点类型、key、props 等
3	计算最小更新路径	如仅更新文本节点内容
4	应用 patch 操作	修改真实 DOM

flowchart LR
    A[数据变更] --> B{是否在Watcher中?}
    B -->|是| C[执行render函数生成新VNode]
    C --> D[Diff算法比较新旧树]
    D --> E[生成patch补丁]
    E --> F[应用到真实DOM]
    F --> G[视图更新完成]
    B -->|否| H[跳过更新]

值得注意的是，Vue 默认采用异步更新策略，即多个数据变更会合并为一次视图更新。这是通过 nextTick 实现的：

Vue.prototype.$nextTick = function(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    setTimeout(flushCallbacks, 0);
  }
};

function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice(0);
  callbacks.length = 0;
  for (let i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

这样即使连续修改多个属性，也只会触发一次 DOM 更新，显著提升性能。

综上所述，Vue 2.x 的响应式系统通过 Object.defineProperty + Dep-Watcher 模式 + 虚拟 DOM 的组合，实现了高效的数据绑定与视图同步机制。虽然存在一定限制，但在大多数业务场景下表现稳定且易于理解，是现代前端框架演进的重要里程碑。

3. Vue事件处理与列表渲染深度实践

在现代前端开发中，用户交互和数据展示构成了应用的核心体验。Vue.js 作为一款以响应式机制著称的框架，在事件处理与列表渲染方面提供了强大且直观的API支持。本章将深入探讨 v-on 事件绑定系统的工作原理、修饰符的应用技巧、 v-for 列表渲染的数据映射规则及其性能优化策略，并通过构建一个可交互的任务清单 UI 来整合这些知识点。更重要的是，我们将剖析高频事件场景下的性能瓶颈，提出基于虚拟滚动与防抖节流的实际优化方案，帮助开发者在真实项目中实现流畅的用户体验。

3.1 事件监听与方法绑定机制

Vue 的事件系统是其响应式架构的重要组成部分，它不仅封装了原生 DOM 事件的监听逻辑，还提供了语法糖级别的便捷操作方式。通过 v-on 指令（简写为 @ ），开发者可以在模板中直接绑定 JavaScript 方法或内联表达式，实现对用户行为的即时响应。这一机制的背后，是 Vue 对原生事件监听器的自动化管理以及对 $emit 自定义事件系统的统一调度。

3.1.1 v-on指令的基本语法与事件修饰符（.stop、.prevent）

v-on 是 Vue 中用于注册事件监听器的核心指令。其基本语法如下：

<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>

该指令会自动将 handleClick 方法注册为按钮的 click 事件处理器。Vue 内部使用 addEventListener 进行事件绑定，并在组件销毁时自动解绑，避免内存泄漏。

更为强大的是 Vue 提供的一系列 事件修饰符 ，它们以点号链式调用的形式附加在事件名之后，用于控制事件的行为流。常见的修饰符包括：

修饰符	功能说明
`.stop`	调用 `event.stopPropagation()` ，阻止事件冒泡
`.prevent`	调用 `event.preventDefault()` ，阻止默认行为
`.capture`	使用捕获模式添加事件监听
`.self`	只当事件是从元素本身触发时才触发回调
`.once`	事件只触发一次
`.passive`	以被动模式监听事件，提升滚动性能

例如，在表单提交时阻止页面刷新：

<form @submit.prevent="onSubmit">
  <input type="text" v-model="taskName" />
  <button type="submit">添加任务</button>
</form>

这里 .prevent 阻止了 <form> 默认的跳转行为，使得我们可以完全由 JavaScript 控制提交流程。

再比如，防止点击遮罩层关闭弹窗时触发底层元素的点击事件：

<div class="modal-overlay" @click.stop="closeModal"></div>

.stop 确保事件不会继续向上传播到父级容器。

下面是一个综合使用多个修饰符的例子：

<a href="https://example.***" 
   @click.stop.prevent.once="trackClick">
   外链（不跳转，仅记录）
</a>

.stop ：阻止事件冒泡
.prevent ：阻止打开链接
.once ：只记录一次点击

代码逻辑逐行解读分析：

<!-- 绑定 click 事件，同时应用三个修饰符 -->
<a href="https://example.***" 
   @click.stop.prevent.once="trackClick">
   外链（不跳转，仅记录）
</a>

@click ：监听鼠标点击事件；
.stop ：调用 event.stopPropagation() ，确保事件不会触发父元素上的其他 click 监听器；
.prevent ：调用 event.preventDefault() ，取消 <a> 标签的默认跳转动作；
.once ：表示此监听器只会执行一次，执行后自动移除；
"trackClick" ：执行组件实例中的 trackClick 方法，可用于埋点上报等用途。

这种声明式的修饰符设计极大提升了开发效率，无需手动编写冗长的事件处理逻辑。

graph TD
    A[用户触发DOM事件] --> B{Vue解析v-on指令}
    B --> C[提取事件名与修饰符]
    C --> D[生成包装后的事件处理器]
    D --> E[调用addEventListener绑定]
    E --> F[运行时触发方法或表达式]
    F --> G[根据修饰符执行stop/prevent等操作]
    G --> H[调用组件方法]

流程图说明 ：从用户点击开始，Vue 编译器解析 v-on 指令并提取事件类型及修饰符，生成一个经过封装的事件处理器函数，最终通过标准 DOM API 注册监听。在事件触发时，先执行修饰符对应的操作（如阻止冒泡），再调用指定的方法。

3.1.2 方法传参与$event对象的正确使用

在实际开发中，经常需要向事件处理函数传递额外参数。Vue 支持在 v-on 中直接调用带参方法：

<button @click="sayHello('world')">打招呼</button>

对应的组件方法：

methods: {
  sayHello(msg) {
    alert(`Hello ${msg}!`);
  }
}

但此时如果还需要访问原生事件对象 event ，就不能省略它。Vue 允许使用特殊变量 $event 显式传递：

<button @click="sayHello('world', $event)">打招呼并阻止默认行为</button>

methods: {
  sayHello(msg, event) {
    if (event) event.preventDefault();
    console.log(`Message: ${msg}`);
  }
}

注意： $event 是 Vue 提供的特殊标识，代表原生 DOM 事件对象，即使在内联表达式中也能被识别。

此外，对于复杂参数结构，建议封装成对象传递：

<button @click="handleAction({ id: 1, type: 'delete' }, $event)">
  删除项目
</button>

这种方法避免了过多的参数列表，提高可读性。

参数说明与最佳实践：

当仅需调用方法而不传参时，推荐省略括号： @click="handleClick"
若需传参，则必须加括号： @click="handleClick(arg)"
若要获取 event 对象，必须显式传入 $event
不建议在模板中写复杂逻辑，应保持表达式简洁

// ❌ 不推荐：模板中包含复杂计算
@click="items.push({name: inputVal}), inputVal=''" 

// ✅ 推荐：封装为方法
@click="addItem"

3.1.3 键盘事件与按键修饰符（.enter、.ctrl）的应用场景

键盘事件是用户输入交互的关键部分。Vue 提供了对 keydown 、 keyup 、 keypress 等事件的支持，并引入了 按键修饰符 来简化常用快捷键的判断。

常见按键修饰符如下：

修饰符	对应键码
`.enter`	Enter 键
`.tab`	Tab 键
`.delete`	Delete 和 Backspace
`.esc`	Escape 键
`.space`	Space 键
`.up` / `.down` / `.left` / `.right`	方向键

示例：监听回车键提交表单

<input 
  type="text" 
  v-model="newTask" 
  @keyup.enter="addTask" 
  placeholder="按Enter添加任务"
/>

当用户输入完毕按下 Enter 键时，触发 addTask 方法。

也可以组合系统按键修饰符：

系统修饰符	说明
`.ctrl`	Ctrl 键
`.alt`	Alt 键
`.shift`	Shift 键
`.meta`	Mac 上的 ***mand 键

例如：只有按下 Ctrl + Enter 才触发发送消息：

<textarea @keyup.ctrl.enter="sendMessage"></textarea>

还可以配合 .exact 实现精确匹配：

<!-- 只有 Ctrl 被按下时才触发 -->
<button @click.ctrl.exact="copy">复制</button>

<!-- Ctrl + Alt 同时按下才触发 -->
<button @click.ctrl.alt="paste">粘贴</button>

代码块与逻辑分析：

<input 
  v-model="searchQuery"
  @keyup.enter="performSearch"
  @keyup.esc="clearSearch"
  placeholder="搜索（Enter确认，Esc清空）"
/>

methods: {
  performSearch() {
    if (this.searchQuery.trim()) {
      this.$emit('search', this.searchQuery);
    }
  },
  clearSearch() {
    this.searchQuery = '';
  }
}

逻辑逐行解析 ：

v-model="searchQuery" ：双向绑定输入框内容；
@keyup.enter="performSearch" ：当用户释放 Enter 键时执行搜索；
@keyup.esc="clearSearch" ：当用户按下 Esc 键时清空输入；
performSearch() 方法检查输入是否非空后再触发搜索事件；
clearSearch() 将模型值重置为空字符串，视图同步更新。

这种方式实现了无 JS 干预的“智能输入控件”，体现了 Vue 声明式编程的优势。

3.2 列表渲染原理与性能优化

列表渲染是前端最常见的需求之一，尤其是在处理动态数据集合（如任务列表、商品目录）时。Vue 通过 v-for 指令实现了高效的数据驱动视图更新机制。然而，不当的使用方式可能导致性能下降甚至内存泄漏。因此，理解 v-for 的工作原理、 key 的作用以及如何遵循不可变数据原则进行更新，是构建高性能应用的基础。

3.2.1 v-for遍历数组与对象的数据映射规则

v-for 指令用于基于源数据重复渲染元素或组件。其语法格式为：

item in items
// 或者 (item, index) in items

支持遍历数组和对象。

遍历数组：

<ul>
  <li v-for="(task, index) in tasks" :key="index">
    {{ index + 1 }}. {{ task.title }}
  </li>
</ul>

其中：
- task ：当前项
- index ：当前索引（可选）
- tasks ：源数组

遍历对象：

<div v-for="(value, key, index) in userInfo" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</div>

输出结果类似：

0. name: 张三
1. age: 28
2. email: zhangsan@example.***

注意：遍历对象时无法保证属性顺序，因为 JavaScript 对象属性遍历顺序依赖于引擎实现。

特殊情况：使用 `of` 替代 `in`

Vue 支持 of 作为 in 的同义词，更符合 ES6 的 for...of 语法习惯：

<li v-for="task of tasks" :key="task.id">{{ task.title }}</li>

两者功能完全相同。

数组变异方法与触发更新

Vue 能够侦测以下数组变更方法并触发视图更新：

方法	是否触发更新
`push()`	✅
`pop()`	✅
`shift()`	✅
`unshift()`	✅
`splice()`	✅
`sort()`	✅
`reverse()`	✅

但以下操作 不会触发响应式更新 ：

// ❌ 非响应式
vm.tasks[0] = { title: '新标题' };
vm.tasks.length = 0;

必须使用 Vue.set() 或 Array.prototype.splice() 来确保响应性。

3.2.2 key属性的重要性及其对Diff算法的影响

key 是 v-for 渲染中至关重要的属性，它为每个节点提供唯一标识，帮助 Vue 的虚拟 DOM Diff 算法高效地复用和移动元素。

考虑以下错误示例：

<!-- ❌ 缺少 key 或使用 index 作为 key -->
<li v-for="(task, index) in tasks" :key="index">{{ task.title }}</li>

当数组顺序发生变化（如排序、插入中间项），由于 index 是变化的，Vue 会误认为所有元素都已改变，导致不必要的重新渲染和状态丢失（如输入框内容清空）。

正确的做法是使用 稳定唯一的 key ，通常是数据 ID：

<!-- ✅ 推荐：使用唯一ID作为key -->
<li v-for="task in tasks" :key="task.id">
  <input v-model="task.title" />
</li>

Diff 算法工作流程（简化版）：

graph LR
    A[旧VNode列表] --> B{遍历新列表}
    B --> C[查找具有相同key的节点]
    C --> D{是否存在?}
    D -- 是 --> E[复用并更新]
    D -- 否 --> F[创建新节点]
    E --> G[移动位置]
    F --> G
    G --> H[删除多余旧节点]

流程图说明 ：Vue 优先根据 key 匹配节点，若找到则复用（保留状态），否则创建新节点。最后清理未匹配的旧节点。

表格对比不同 key 策略的影响：

Key 类型	可靠性	适用场景	风险
数据ID（如 `task.id` ）	高	列表频繁增删改	无
Index	低	静态、只追加的列表	排序/插入导致状态错乱
随机数	极低	禁止使用	每次渲染都重建

结论：始终优先使用业务主键作为 key 。

3.2.3 列表更新策略：不可变数据模式与Vue.set()的使用时机

为了保证响应式系统的正常工作，推荐采用 不可变数据模式 （Immutable Pattern），即不直接修改原始数组，而是返回一个新数组：

// ✅ 推荐：不可变更新
this.tasks = this.tasks.filter(t => t.id !== taskId);

// ❌ 不推荐：直接修改
this.tasks.splice(index, 1);

虽然 splice 是变异方法，能触发更新，但在某些情况下（如嵌套对象深层修改）仍可能失效。

对于对象属性的动态添加，必须使用 Vue.set() ：

// ❌ 无效：新增属性不会响应
this.tasks[0].***pleted = true;

// ✅ 正确：使用 Vue.set
this.$set(this.tasks[0], '***pleted', true);

// 或全局 API
Vue.set(this.tasks[0], '***pleted', true);

同样适用于数组索引赋值：

// ❌ 无效
this.tasks[0] = newTask;

// ✅ 正确
this.$set(this.tasks, 0, newTask);

完整示例：安全更新任务状态

methods: {
  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      this.$set(task, 'done', !task.done);
    }
  },
  removeTask(id) {
    this.tasks = this.tasks.filter(t => t.id !== id);
  }
}

toggleTask 使用 $set 确保 done 属性的变更被侦测；
removeTask 返回新数组，符合不可变原则。

3.3 综合实战：实现可交互的任务清单UI

结合前两节的知识，我们来构建一个完整的任务清单组件，涵盖添加、删除、状态切换等功能。

3.3.1 基于数组的任务数据结构设计

定义任务模型：

data() {
  return {
    newTaskTitle: '',
    tasks: [
      { id: 1, title: '学习Vue事件系统', done: false },
      { id: 2, title: '完成任务列表实战', done: true }
    ]
  }
}

3.3.2 添加/删除任务的功能逻辑实现

<template>
  <div class="task-list">
    <form @submit.prevent="addTask">
      <input 
        v-model="newTaskTitle"
        placeholder="输入新任务..."
        @keyup.esc="newTaskTitle = ''"
      />
      <button type="submit">添加</button>
    </form>

    <ul>
      <li v-for="task in tasks" :key="task.id">
        <span 
          :class="{ done: task.done }"
          @click="toggleTask(task.id)"
        >
          {{ task.title }}
        </span>
        <button @click="removeTask(task.id)">×</button>
      </li>
    </ul>
  </div>
</template>

methods: {
  addTask() {
    if (!this.newTaskTitle.trim()) return;
    const newTask = {
      id: Date.now(),
      title: this.newTaskTitle,
      done: false
    };
    this.tasks.push(newTask);
    this.newTaskTitle = '';
  },
  removeTask(id) {
    this.tasks = this.tasks.filter(t => t.id !== id);
  },
  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      this.$set(task, 'done', !task.done);
    }
  }
}

样式部分：

.done {
  text-decoration: line-through;
  color: #888;
}

3.3.3 使用事件与v-for联动完成状态切换

通过 @click="toggleTask(task.id)" 实现点击任务文本切换完成状态，利用 :class="{ done: task.done }" 动态控制样式，形成闭环交互。

3.4 深度优化：列表滚动性能调优技巧

面对数千条数据的渲染，传统 v-for 会导致严重性能问题。解决方案包括虚拟滚动和事件节流。

3.4.1 虚拟滚动概念与简单实现思路

虚拟滚动只渲染可视区域内的项目，大幅减少 DOM 节点数量。

核心思想：
- 计算容器高度与每项高度
- 确定可见范围（startIndex ~ endIndex）
- 渲染窗口内项目，并设置顶部偏移量

简易实现片段：

<div class="virtual-scroll" @scroll="onScroll">
  <div :style="{ height: totalHeight + 'px' }">
    <div 
      v-for="i in visibleCount" 
      :key="i + startIndex"
      :style="{ transform: `translateY(${(startIndex + i - 1) * itemHeight}px)` }"
    >
      {{ items[startIndex + i - 1].title }}
    </div>
  </div>
</div>

3.4.2 防抖节流在高频事件中的应用

对于 @scroll 、 @input 等高频事件，应使用防抖或节流：

import { debounce } from 'lodash';

export default {
  methods: {
    onScroll: debounce(function() {
      console.log('滚动结束');
    }, 150)
  }
}

或原生实现节流：

throttle(fn, delay) {
  let timer = null;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  }
}

4. Vue组件化开发体系与通信机制

在现代前端工程中，组件化是构建可维护、可扩展应用的核心思想。Vue.js 通过其强大的组件系统，将页面拆解为独立且可复用的模块单元，极大提升了开发效率和代码质量。组件不仅封装了视图结构（template）、逻辑行为（script）与样式定义（style），还提供了清晰的通信机制，使得不同层级之间的数据流动变得可控而有序。本章将深入剖析 Vue2.x 中组件的设计原理与实现方式，重点探讨单文件组件的组织结构、生命周期钩子函数的行为特征以及父子组件之间高效通信的技术路径，并结合实际案例完成一个高内聚、低耦合的 Modal 弹窗组件封装。

4.1 单文件组件(SFC)的设计与注册

Vue 的单文件组件（Single File ***ponent, SFC）是其最具代表性的开发模式之一，它通过 .vue 文件统一管理模板、脚本与样式，形成高度内聚的模块单元。这种结构化的组织方式显著提升了项目的可读性和维护性，尤其适用于大型项目中的团队协作。

4.1.1 .vue文件的三段式结构（template/script/style）

每个 .vue 文件由三个顶层语言块构成： <template> 、 <script> 和 <<style> ，分别负责 UI 渲染、业务逻辑与视觉表现。

<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>年龄：{{ age }}</p>
    <button @click="increaseAge">增加年龄</button>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  data() {
    return {
      name: '张三',
      age: 25
    };
  },
  methods: {
    increaseAge() {
      this.age += 1;
    }
  }
};
</script>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}
h3 {
  color: #333;
}
</style>

代码逻辑逐行解读：

第 2–7 行（template） ：使用 Mustache 语法绑定 name 和 age 数据字段，并监听按钮点击事件调用 increaseAge 方法。
第 10–21 行（script） ：
name: 'UserCard' 定义组件名称，用于调试工具识别及递归引用；
data() 返回响应式数据对象，必须是一个函数以避免多个实例共享同一状态；
methods 中定义 increaseAge 方法，修改 this.age 触发视图更新。
第 24–33 行（style） ：
使用 scoped 属性限定 CSS 作用域，防止样式污染其他组件；
编译时 Vue 会自动为元素添加唯一属性选择器（如 data-v-f3f439a2 ），实现局部样式隔离。

语言块	功能说明	可选/必需
`<template>`	定义组件的 HTML 模板结构	必需（至少一个）
`<script>`	导出组件配置对象（选项式 API）	可选（无逻辑可省略）
`<style>`	提供组件样式规则	可选

此外，还可以通过 lang 属性支持非标准语法：

<template lang="pug">
  .user-card
    h3= name
    p 年龄：#{age}
</template>

<style lang="scss" scoped>
$user-bg: #f9f9f9;
.user-card {
  background: $user-bg;
  &:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}
</style>

上述示例使用 Pug（原 Jade）作为模板语言，Sass/SCSS 作为预处理器，提升书写效率并增强表达能力。构建工具（如 Webpack + vue-loader）会解析这些扩展语法并转换为浏览器可执行代码。

graph TD
    A[.vue 文件] --> B{包含哪些块？}
    B --> C[<template>]
    B --> D[<script>]
    B --> E[<style>]
    C --> F[编译为渲染函数]
    D --> G[导出组件配置对象]
    E --> H[提取并处理CSS]
    F --> I[生成虚拟DOM]
    G --> I
    H --> J[注入到页面<head>或提取成CSS文件]
    I --> K[最终渲染为真实DOM]

该流程图展示了 .vue 文件从源码到运行时的完整编译链路：模板被编译为 render 函数，脚本导出配置合并进组件实例，样式经过处理后注入文档头部或打包输出。

4.1.2 局部注册与全局注册的适用场景对比

在 Vue 应用中，组件可以通过两种方式注册： 局部注册 和 全局注册 ，二者在作用范围、性能影响和使用灵活性上有明显差异。

全局注册（Global Registration）

使用 Vue.***ponent() 在根实例创建前注册组件，使其在整个应用中任何位置均可直接使用。

import Vue from 'vue';
import UserCard from './***ponents/UserCard.vue';

Vue.***ponent('UserCard', UserCard);

new Vue({
  el: '#app',
  template: '<UserCard />'
});

优点：
- 组件无需导入即可在任意模板中使用；
- 适合基础通用组件（如按钮、图标等）；

缺点：
- 所有组件都会被打包进主 bundle，即使未被使用（不利于懒加载）；
- 命名冲突风险较高；
- 不利于 Tree-shaking 优化。

局部注册（Local Registration）

仅在需要使用的父组件内部通过 ***ponents 选项显式引入。

<template>
  <div>
    <UserCard />
  </div>
</template>

<script>
import UserCard from './***ponents/UserCard.vue';

export default {
  ***ponents: {
    UserCard  // 等价于 UserCard: UserCard
  }
};
</script>

优点：
- 实现按需加载，便于代码分割；
- 更好的模块封装性，降低耦合；
- 支持 webpack 的动态导入实现懒加载：

***ponents: {
  UserCard: () => import('./***ponents/UserCard.vue')
}

此时 UserCard 组件会在首次渲染时异步加载，减少初始包体积。

对比维度	全局注册	局部注册
注册方式	`Vue.*ponent(tagName, *p)`	在 `***ponents` 字段中声明
作用域	全局可用	仅当前组件及其子组件可用
打包影响	强制包含在主包	可配合异步导入做代码分割
命名安全性	易冲突	局部作用域更安全
适用场景	公共基础组件（Button、Icon）	业务组件、页面级组件

推荐策略：优先采用局部注册，保持项目结构清晰；对于频繁使用的 UI 组件库组件，可在入口文件统一注册，但建议启用按需引入插件（如 babel-plugin-***ponent ）来避免全量加载。

4.1.3 组件命名规范与最佳实践建议

良好的命名习惯不仅能提升代码可读性，还能规避潜在问题，尤其是在团队协作环境中尤为重要。

多词命名强制要求

根据 Vue 官方风格指南，所有组件名应遵循“多单词”原则，即至少包含两个单词，用连字符分隔：

// ❌ 错误：单个单词
Vue.***ponent('task', Task***ponent);

// ✅ 正确：复合命名
Vue.***ponent('task-item', TaskItem);
Vue.***ponent('user-profile', UserProfile);

原因在于 HTML 标签不区分大小写，若使用单词可能导致与原生标签冲突（如 <input> 、 <table> ），也容易造成语义模糊。

命名风格推荐

kebab-case（短横线分隔） ：适用于模板中使用：

vue <template> <my-***ponent></my-***ponent> </template>

PascalCase（大驼峰） ：适用于 JavaScript 中导入和注册：

js import My***ponent from './My***ponent.vue'; export default { ***ponents: { My***ponent } };

注意：若使用 PascalCase 注册，模板中仍可使用 kebab-case 调用（Vue 自动转换），但反过来不行。

文件命名一致性

.vue 文件本身也应遵循 PascalCase 或 kebab-case 统一风格，推荐使用 PascalCase：

src/
├── ***ponents/
│   ├── UserProfile.vue
│   ├── TaskList.vue
│   └── ModalDialog.vue

这有助于 IDE 快速识别组件类型，并与类名保持一致。

高阶命名建议

功能导向命名 ：突出组件职责，如 DataTable 、 FormValidator ；
容器 vs 展示组件 ：可通过前缀区分，如 LayoutHeader （布局类）、 UserInfoDisplay （展示类）；
避免过于宽泛名称 ：如 ***ponentA 、 BaseView ，缺乏语义信息。

综上，合理的命名体系是构建高质量组件生态的基础，应在项目初期制定统一规范并在 CI 流程中集成 ESLint 插件进行校验（如 vue/multi-word-***ponent-names 规则）。

5. Vue HTTP请求管理与本地数据持久化

随着前后端分离架构的广泛应用，前端应用不再仅仅负责页面渲染，而是逐渐承担起完整的业务逻辑处理、状态管理和数据交互职责。在这一背景下，如何高效地发起HTTP请求获取远程数据，并将关键状态在客户端进行持久化存储，已成为现代Vue应用开发中的核心能力之一。本章将围绕 vue-resource 插件（适用于Vue 2.x）展开对异步请求机制的深度解析，结合浏览器原生的 LocalStorage API 实现数据本地缓存，最终通过一个完整的任务清单（TodoList）示例，构建一套闭环的数据流管理体系。

我们将从基础请求封装开始，逐步过渡到拦截器配置、错误处理策略和持久化机制的设计模式，确保即使在离线或刷新场景下，用户数据依然可恢复，提升整体用户体验。

5.1 vue-resource集成与RESTful接口通信实践

在Vue 2.x生态中，虽然官方推荐使用更通用的 axios ，但 vue-resource 曾是早期最流行的HTTP客户端插件之一，具备轻量级、易用性强、与Vue实例无缝集成等优点。尽管目前已被社区逐步淘汰，但在维护老项目或学习Vue生态演进过程中，掌握其工作机制仍具有现实意义。

5.1.1 安装与全局注册vue-resource

要使用 vue-resource ，首先需通过npm/yarn安装：

npm install vue-resource --save

随后在主入口文件 main.js 中引入并注册为Vue插件：

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'

// 注册vue-resource插件
Vue.use(VueResource)

new Vue({
  render: h => h(App)
}).$mount('#app')

参数说明与逻辑分析 ：
- Vue.use(VueResource) ：调用Vue的插件系统，执行 vue-resource 提供的 install 方法，自动挂载 $http 实例到所有组件。
- 挂载后，任意组件可通过 this.$http 发起GET、POST等请求，无需额外导入模块。

注册完成后，每个Vue组件实例都将拥有 $http 属性，支持如下常用方法：
- this.$http.get(url, [options])
- this.$http.post(url, body, [options])
- this.$http.put() , this.$http.delete() 等RESTful动词对应方法

该设计体现了Vue插件系统的强大扩展性，使得第三方库能以声明式方式注入全局功能。

5.1.2 使用vue-resource发起GET/POST请求

以下是一个典型的任务列表加载与提交示例：

// TaskList.vue
export default {
  data() {
    return {
      tasks: [],
      newTaskTitle: ''
    }
  },
  created() {
    // 页面初始化时拉取任务列表
    this.fetchTasks()
  },
  methods: {
    fetchTasks() {
      this.$http.get('/api/tasks')
        .then(response => {
          this.tasks = response.body
        })
        .catch(error => {
          console.error('请求失败:', error)
        })
    },
    addTask() {
      if (!this.newTaskTitle.trim()) return

      const taskData = { title: this.newTaskTitle, ***pleted: false }

      this.$http.post('/api/tasks', taskData)
        .then(response => {
          this.tasks.push(response.body)
          this.newTaskTitle = ''
        })
        .catch(error => {
          alert('添加任务失败')
        })
    }
  }
}

逐行解读与扩展说明 ：
- created() 钩子中调用 fetchTasks() ：利用组件生命周期在挂载前预加载数据。
- this.$http.get('/api/tasks') ：发送GET请求至后端API，返回Promise对象。
- .then(response => {...}) ：成功回调中提取响应体 response.body （vue-resource默认解析JSON）。
- .catch() 处理网络异常或服务器错误，避免未捕获异常导致崩溃。
- POST请求携带JSON格式的 taskData ，服务端应正确配置CORS及body-parser中间件以接收数据。

此代码结构清晰展示了“请求 → 成功更新状态 → 视图自动响应”的典型Vue数据流闭环。

5.1.3 请求选项与超时控制

vue-resource 支持丰富的请求配置项，可通过第二个参数传入选项对象：

this.$http.get('/api/tasks', {
  headers: { 'Authorization': 'Bearer ' + token },
  timeout: 5000,
  credentials: true // 启用跨域带cookie
})

参数	类型	说明
`headers`	Object	自定义HTTP头，常用于认证
`timeout`	Number	超时毫秒数，超时触发catch
`credentials`	Boolean	是否发送凭据（如Cookie），用于跨域认证
`params`	Object	自动拼接到URL查询字符串

例如：

this.$http.get('/api/search', {
  params: { q: 'vue', page: 1 }
})
// 实际请求URL: /api/search?q=vue&page=1

这些配置极大增强了请求的灵活性，便于对接复杂后端接口规范。

5.1.4 异常统一处理与拦截器机制

为了实现全局错误提示和认证校验，可以使用 vue-resource 的拦截器（Interceptors）功能，在请求发出前和响应返回后插入逻辑。

Vue.http.interceptors.push((request, next) => {
  // 请求拦截：添加Token
  const token = localStorage.getItem('auth_token')
  if (token) {
    request.headers.set('Authorization', 'Bearer ' + token)
  }

  // 响应拦截
  next(response => {
    if (response.status === 401) {
      // 认证失败，跳转登录页
      window.location.href = '/login'
    } else if (response.status >= 500) {
      alert('服务器内部错误，请稍后再试')
    }
    return response
  })
})

流程图展示请求拦截全过程 ：

graph TD
    A[发起HTTP请求] --> B{是否配置拦截器?}
    B -->|是| C[执行请求拦截逻辑]
    C --> D[附加Header/Token等]
    D --> E[发送实际请求]
    E --> F[服务器返回响应]
    F --> G{是否配置响应拦截?}
    G -->|是| H[检查状态码]
    H --> I{是否为401?}
    I -->|是| J[跳转登录页]
    I -->|否| K{是否>=500?}
    K -->|是| L[弹出错误提示]
    K -->|否| M[正常返回数据]
    M --> N[组件.then处理结果]

该机制实现了关注点分离：认证、日志、重试等横切逻辑被集中管理，避免在每个请求中重复编写。

5.2 浏览器本地存储机制对比与LocalStorage实战

当用户刷新页面时，内存中的Vue数据模型会被清空，导致体验断裂。为此，必须借助客户端存储技术实现数据持久化。目前主流方案包括：

存储方式	容量	持久性	跨域	特点
`LocalStorage`	~5MB	永久保存（除非清除）	同源	简单易用，同步API
`SessionStorage`	~5MB	会话级（关闭标签即失）	同源	适合临时数据
`IndexedDB`	数百MB~GB	持久	同源	异步、事务型数据库
`Cookie`	~4KB	可设过期时间	可跨域设置	每次随请求发送

对于中小型应用（如TodoList）， LocalStorage 是最优选择——简单、可靠、无需额外依赖。

5.2.1 封装安全的LocalStorage操作工具类

直接使用 localStorage.setItem/getItem 存在类型限制（仅字符串），且缺乏错误边界。建议封装一层工具函数：

const Storage = {
  set(key, value) {
    try {
      const serialized = JSON.stringify(value)
      localStorage.setItem(key, serialized)
    } catch (e) {
      console.warn(`保存${key}失败`, e)
    }
  },

  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key)
      return item ? JSON.parse(item) : defaultValue
    } catch (e) {
      console.error(`读取${key}解析失败`, e)
      return defaultValue
    }
  },

  remove(key) {
    localStorage.removeItem(key)
  }
}

逻辑分析 ：
- set() ：先序列化为JSON字符串再存储，防止对象变 [object Object] 。
- get() ：尝试反序列化，失败则返回默认值，增强容错。
- 所有操作包裹在try-catch中，避免因存储空间满或权限问题阻塞主线程。

5.2.2 在Vue组件中集成持久化逻辑

修改之前的 TaskList.vue ，使其支持自动保存与恢复：

export default {
  data() {
    return {
      tasks: Storage.get('tasks', []), // 初始化从本地恢复
      newTaskTitle: ''
    }
  },
  watch: {
    tasks: {
      handler(newVal) {
        Storage.set('tasks', newVal) // 数据变化时自动保存
      },
      deep: true // 深度监听数组内部变化
    }
  },
  methods: {
    addTask() {
      const task = { id: Date.now(), title: this.newTaskTitle, ***pleted: false }
      this.tasks.push(task)
      this.newTaskTitle = ''
    },
    deleteTask(id) {
      this.tasks = this.tasks.filter(t => t.id !== id)
    },
    toggle***plete(id) {
      const task = this.tasks.find(t => t.id === id)
      if (task) task.***pleted = !task.***pleted
    }
  }
}

关键点解析 ：
- 初始数据从 Storage.get('tasks') 获取，若无则用空数组兜底。
- 使用 watch 监听 tasks 数组的深层变化（ deep: true ），每次变更都触发保存。
- id: Date.now() 提供唯一标识，便于后续删除与查找。

该模式实现了“无感持久化”，用户无须手动点击“保存”即可保障数据安全。

5.2.3 持久化性能优化与节流策略

频繁写入 localStorage 可能造成性能瓶颈，尤其是在监听大型数组时。应引入防抖机制延迟写入：

import { debounce } from 'lodash'

export default {
  // ...
  watch: {
    tasks: debounce(function(newVal) {
      Storage.set('tasks', newVal)
    }, 300)
  }
}

或使用原生实现：

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

这样可将连续多次变更合并为一次存储操作，显著减少I/O压力。

5.3 综合实战：构建具备离线能力的TodoList应用

现在我们将前述知识整合，打造一个具备完整数据流闭环的任务管理系统。

5.3.1 架构设计与模块划分

应用包含以下核心能力：
- ✅ 从后端API加载初始任务
- ✅ 新增/删除/完成任务
- ✅ 实时同步至LocalStorage
- ✅ 页面刷新后自动恢复状态
- ✅ 网络异常时降级为本地操作

5.3.2 核心组件实现

<template>
  <div class="todo-app">
    <h2>任务清单</h2>
    <input
      v-model="newTaskTitle"
      @keyup.enter="addTask"
      placeholder="输入新任务..."
    />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input
          type="checkbox"
          :checked="task.***pleted"
          @change="toggle***plete(task.id)"
        />
        <span :class="{ ***pleted: task.***pleted }">{{ task.title }}</span>
        <button @click="deleteTask(task.id)">×</button>
      </li>
    </ul>
  </div>
</template>

<script>
import Storage from '@/utils/storage'

export default {
  data() {
    return {
      tasks: Storage.get('tasks', []),
      newTaskTitle: ''
    }
  },
  async created() {
    try {
      const response = await this.$http.get('/api/tasks')
      this.tasks = response.body
    } catch (e) {
      console.log('无法连接服务器，使用本地数据')
    }
  },
  watch: {
    tasks: {
      handler: this.debouncedSave,
      deep: true
    }
  },
  methods: {
    debouncedSave: debounce(function (newVal) {
      Storage.set('tasks', newVal)
    }, 300),
    addTask() {
      if (!this.newTaskTitle.trim()) return
      const task = {
        id: Date.now(),
        title: this.newTaskTitle,
        ***pleted: false
      }
      this.tasks.push(task)
      this.newTaskTitle = ''
      this.syncToServer(task)
    },
    deleteTask(id) {
      this.tasks = this.tasks.filter(t => t.id !== id)
    },
    toggle***plete(id) {
      const task = this.tasks.find(t => t.id === id)
      if (task) task.***pleted = !task.***pleted
      this.syncToServer(task, 'PUT')
    },
    async syncToServer(task, method = 'POST') {
      try {
        await this.$http[method.toLowerCase()]('/api/tasks', task)
      } catch (e) {
        console.warn('同步失败，将继续尝试')
      }
    }
  }
}

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}
</script>

<style scoped>
.***pleted {
  text-decoration: line-through;
  color: #888;
}
button {
  background: #f44;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

表格：功能与技术映射关系

功能模块	技术实现	说明
数据初始化	`created + $http.get`	首次尝试拉取云端数据
状态恢复	`Storage.get('tasks')`	本地兜底策略
持久化保存	`watch + debounce + localStorage`	高效防抖写入
用户交互	`v-model` , `@click` , `v-for`	响应式UI绑定
离线兼容	`try/catch + fallback`	网络异常不影响本地操作

5.3.3 运行流程与容错机制

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant LocalStorage

    User->>Frontend: 打开页面
    Frontend->>Backend: GET /api/tasks
    alt 请求成功
        Backend-->>Frontend: 返回任务列表
        Frontend->>Frontend: 更新tasks
    else 请求失败
        Frontend->>LocalStorage: 读取本地缓存
        Frontend->>Frontend: 显示历史数据
    end

    User->>Frontend: 添加任务
    Frontend->>Frontend: 更新tasks数组
    Frontend->>LocalStorage: 延迟保存
    Frontend->>Backend: POST /tasks (后台同步)
    Backend-->>Frontend: 确认创建

    Note right of Frontend: 即使此时断网，<br/>任务仍保留在本地

这种“乐观更新 + 异步同步”模式极大提升了应用健壮性和用户体验。

5.4 高级话题：离线优先架构与Service Worker初探

为进一步提升离线能力，可引入 Service Worker 实现真正的PWA（Progressive Web App）特性，拦截网络请求并优先返回缓存数据。

5.4.1 使用Cache API模拟离线资源访问

// register-sw.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.error('SW failed', err))
}

// sw.js
const CACHE_NAME = 'todo-v1'
const urlsToCache = ['/index.html', '/app.js', '/style.css']

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  )
})

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  )
})

配合 vue-resource 的拦截器，可在离线时直接读取 caches 中的历史响应，实现无缝降级。

5.4.2 未来迁移建议：转向axios + vuex-persistedstate

虽然 vue-resource 简洁易懂，但已停止维护。建议新项目采用：

axios ：功能更强大，支持拦截、取消请求、浏览器/Node双端运行。
vuex + vuex-persistedstate ：将全局状态自动同步至 localStorage ，无需手动监听。

npm install axios vuex vuex-persistedstate

// store.js
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state: { tasks: [] },
  mutations: {
    SET_TASKS(state, tasks) {
      state.tasks = tasks
    }
  },
  plugins: [createPersistedState()]
})

一行代码即可实现自动持久化，大幅提升开发效率。

综上所述，本章系统阐述了Vue 2.x环境下HTTP请求管理与本地数据持久化的完整解决方案。从 vue-resource 的集成到 LocalStorage 的封装，再到离线优先架构的展望，层层递进，构建出高可用、强健壮的前端数据层体系。这套模式不仅适用于TodoList类小型应用，也为后续向Vuex+axios+PWA架构演进打下坚实基础。

6. Vuex状态管理模式集成与全局状态管理实战

在现代前端开发中，随着单页应用（SPA）复杂度的不断提升，组件间共享状态的管理逐渐成为架构设计中的核心挑战。传统的父子组件通过 props 和 $emit 传递数据的方式，在小型项目中表现良好，但当应用规模扩大、组件层级加深、跨模块通信频繁时，极易出现“状态分散”、“数据流混乱”等问题。为解决这一痛点，Vue 官方推出了 Vuex —— 一个专为 Vue.js 应用设计的状态管理模式与库。

Vuex 提供了一种集中式的状态存储机制，所有组件都可以访问同一个 Store 实例中的数据，并遵循严格的变更流程，确保状态变化可预测、可追踪。本章将深入剖析 Vuex 的五大核心概念：State、Getters、Mutations、Actions 与 Modules，并结合真实企业级应用场景，演示如何构建模块化、可维护、可调试的全局状态管理体系。

6.1 Vuex 核心模块工作原理解析

Vuex 的设计灵感来源于 Flux 架构模式，强调单向数据流和状态不可变性。其核心思想是： 所有状态变更都必须通过显式提交 Mutation 来完成，而异步操作则由 Action 触发并最终提交 Mutation 。这种分层结构保证了状态变更的可追踪性和可测试性。

6.1.1 State：单一状态树的设计哲学

State 是 Vuex 中唯一的数据源，整个应用的所有共享状态都被集中存放在一个对象中，称为“单一状态树”（Single Source of Truth）。这不仅简化了状态查找路径，也便于进行状态快照、持久化或时间旅行调试。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null,
    cartItems: [],
    loading: false,
    notifications: []
  }
});

代码逻辑分析 ：
- 第1-3行：引入 Vue 和 Vuex 插件，调用 Vue.use(Vuex) 注册插件。
- 第5-12行：创建一个 Vuex.Store 实例， state 字段定义了一个包含用户信息、购物车、加载状态和通知列表的顶层状态对象。
- 此处使用的是扁平化的状态结构，适用于中小型项目；大型项目建议采用模块化拆分（见 6.1.5）。

该 state 可在任意组件中通过 this.$store.state.user 访问，避免了层层传递 props 的繁琐过程。

属性名	类型	说明
user	Object/null	当前登录用户信息
cartItems	Array	用户购物车商品列表
loading	Boolean	全局加载状态标志
notifications	Array	消息通知队列

graph TD
    A[组件A] -->|读取| B((Store))
    C[组件B] -->|读取| B
    D[组件C] -->|提交Mutation| B
    E[Action] -->|异步后提交| B
    B --> F[State 更新]
    F --> G[视图自动更新]

流程图说明 ：上图为 Vuex 数据流向示意图。无论来自哪个组件，所有状态读取均指向中心 Store；Mutation 是唯一修改 State 的入口，且必须同步执行；Action 负责处理异步逻辑后再提交 Mutation，从而实现可控的状态变更。

6.1.2 Getters：派生状态的高效计算机制

Getters 相当于组件中的 ***puted 属性，用于从 State 中派生出新的数据。它们具有缓存特性，只有在其依赖的 State 发生变化时才会重新计算，极大提升了性能。

getters: {
  isLoggedIn: state => !!state.user,
  cartTotalPrice: state => {
    return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
  },
  unreadCount: (state) => state.notifications.filter(n => !n.read).length
}

代码逻辑分析 ：
- isLoggedIn ：判断是否有用户登录，返回布尔值。
- cartTotalPrice ：计算购物车总价，利用 reduce 遍历数组累加 (price × quantity) 。
- unreadCount ：统计未读通知数量，使用 filter 筛选未读项后取长度。
- 所有 getter 接收 state 作为第一个参数，第二个可选参数为其他 getters，支持相互引用。

在组件中可通过以下方式调用：

***puted: {
  totalPrice() {
    return this.$store.getters.cartTotalPrice;
  }
}

或者使用 mapGetters 辅助函数简化映射：

import { mapGetters } from 'vuex';

export default {
  ***puted: {
    ...mapGetters([
      'isLoggedIn',
      'cartTotalPrice'
    ])
  }
}

这种方式使得模板中可以直接使用 {{ cartTotalPrice }} ，无需重复定义计算逻辑。

6.1.3 Mutations：同步状态变更的唯一通道

Mutation 是修改 State 的唯一合法途径，必须是 同步函数 ，以确保每次状态变更都能被 Devtools 准确记录。每个 Mutation 都有一个字符串类型的事件类型（type）和一个回调函数。

mutations: {
  SET_USER(state, payload) {
    state.user = payload;
  },
  ADD_TO_CART(state, product) {
    const existing = state.cartItems.find(item => item.id === product.id);
    if (existing) {
      existing.quantity += 1;
    } else {
      state.cartItems.push({ ...product, quantity: 1 });
    }
  },
  SET_LOADING(state, status) {
    state.loading = status;
  }
}

代码逻辑分析 ：
- SET_USER ：接收 payload（通常为用户对象），赋值给 state.user。
- ADD_TO_CART ：检查商品是否已存在，若存在则增加数量，否则添加新条目。
- SET_LOADING ：控制全局加载状态开关。
- 所有 mutation 回调接收两个参数： state 和 payload （可为任意类型，推荐对象形式以便扩展）。

触发 mutation 必须使用 ***mit 方法：

this.$store.***mit('SET_USER', { id: 1, name: 'Alice' });

也可以使用常量代替字符串类型，提升可维护性：

// mutation-types.js
export const SET_USER = 'SET_USER';
export const ADD_TO_CART = 'ADD_TO_CART';

// store.js
import { SET_USER } from './mutation-types';
mutations: {
  [SET_USER](state, payload) {
    state.user = payload;
  }
}

6.1.4 Actions：异步操作的协调中心

由于 Mutation 必须保持同步，任何涉及 API 请求、定时器等异步行为的操作都应封装在 Action 中。Action 提交的是 Mutation，而不是直接修改 State。

actions: {
  async fetchUserProfile({ ***mit }, userId) {
    ***mit('SET_LOADING', true);
    try {
      const response = await api.getUser(userId);
      ***mit('SET_USER', response.data);
    } catch (error) {
      console.error('Failed to fetch user:', error);
    } finally {
      ***mit('SET_LOADING', false);
    }
  },
  addToCart({ state, ***mit }, product) {
    if (state.user) {
      ***mit('ADD_TO_CART', product);
    } else {
      alert('请先登录');
    }
  }
}

代码逻辑分析 ：
- fetchUserProfile ：接受 { ***mit } 解构对象和 userId 参数，先设置 loading 为 true，发起异步请求，成功后提交 SET_USER，失败则捕获错误，最后关闭 loading。
- addToCart ：检查用户是否登录，再决定是否添加商品。
- Action 函数接收上下文对象（context），常用解构包括 ***mit , dispatch , state , getters 。

调用方式为 dispatch ：

this.$store.dispatch('fetchUserProfile', 123);

同样支持 mapActions 映射：

import { mapActions } from 'vuex';

methods: {
  ...mapActions(['fetchUserProfile', 'addToCart'])
}

6.1.5 Modules：模块化组织大规模状态

当应用变得庞大时，将所有状态集中在一个文件会导致难以维护。Vuex 支持将 Store 分割成模块（Module），每个模块拥有自己的 state、getters、mutations 和 actions。

const userModule = {
  namespaced: true,
  state: { user: null, token: '' },
  mutations: {
    LOGIN(state, payload) {
      state.user = payload.user;
      state.token = payload.token;
    },
    LOGOUT(state) {
      state.user = null;
      state.token = '';
    }
  },
  actions: {
    login({ ***mit }, credentials) {
      // 模拟登录请求
      setTimeout(() => {
        ***mit('LOGIN', { user: { name: 'Bob' }, token: 'abc123' });
      }, 1000);
    }
  }
};

const cartModule = {
  namespaced: true,
  state: { items: [] },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  }
};

const store = new Vuex.Store({
  modules: {
    user: userModule,
    cart: cartModule
  }
});

代码逻辑分析 ：
- 每个模块独立定义自身的状态与逻辑。
- namespaced: true 启用命名空间，防止不同模块间的 action/mutation 冲突。
- 在组件中需带上模块路径调用：

javascript this.$store.***mit('user/LOGIN', userData); this.$store.dispatch('cart/ADD_ITEM', product);

模块化结构显著提升了代码组织能力，适合团队协作开发。

6.2 实战案例：构建电商应用中的购物车与用户状态管理

我们以一个典型的电商前端为例，展示如何利用 Vuex 统一管理用户认证、购物车、订单等跨组件状态。

6.2.1 需求分析与状态建模

目标功能包括：
- 用户登录/登出
- 商品浏览与加入购物车
- 购物车增删改查
- 订单提交前校验

对应的状态模型如下：

模块	状态字段	类型	描述
auth	user, token, isAuthenticated	Object/String/Boolean	用户身份信息
cart	items[], totalQuantity, totalPrice	Array/Number/Number	购物车内容及汇总
ui	isLoading, toastMessage	Boolean/String	全局 UI 状态

6.2.2 Store 模块实现

// store/modules/auth.js
const state = {
  user: null,
  token: '',
  isAuthenticated: false
};

const mutations = {
  SET_AUTH(state, { user, token }) {
    state.user = user;
    state.token = token;
    state.isAuthenticated = true;
  },
  CLEAR_AUTH(state) {
    state.user = null;
    state.token = '';
    state.isAuthenticated = false;
  }
};

const actions = {
  login({ ***mit }, { username, password }) {
    // 模拟API调用
    if (username === 'admin' && password === '123') {
      ***mit('SET_AUTH', {
        user: { id: 1, username, role: 'admin' },
        token: 'fake-jwt-token'
      });
    } else {
      throw new Error('Invalid credentials');
    }
  },
  logout({ ***mit }) {
    ***mit('CLEAR_AUTH');
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

// store/modules/cart.js
const state = {
  items: []
};

const getters = {
  totalQuantity: state => state.items.reduce((sum, i) => sum + i.quantity, 0),
  totalPrice: state => state.items.reduce((sum, i) => sum + i.price * i.quantity, 0)
};

const mutations = {
  ADD_ITEM(state, product) {
    const exist = state.items.find(i => i.id === product.id);
    if (exist) {
      exist.quantity++;
    } else {
      state.items.push({ ...product, quantity: 1 });
    }
  },
  REMOVE_ITEM(state, productId) {
    state.items = state.items.filter(i => i.id !== productId);
  },
  UPDATE_QUANTITY(state, { id, quantity }) {
    const item = state.items.find(i => i.id === id);
    if (item && quantity > 0) item.quantity = quantity;
  }
};

const actions = {
  addItem({ ***mit, state }, product) {
    if (!state.items.some(i => i.id === product.id)) {
      // 可在此 dispatch 日志上报
    }
    ***mit('ADD_ITEM', product);
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

主 Store 文件整合：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
import cart from './modules/cart';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    cart
  },
  strict: process.env.NODE_ENV !== 'production' // 开发环境下启用严格模式
});

6.2.3 组件中使用 Vuex 的完整示例

<!-- ***ponents/CartItem.vue -->
<template>
  <div class="cart-item">
    <span>{{ item.name }}</span>
    <input 
      type="number" 
      :value="item.quantity"
      @input="$store.***mit('cart/UPDATE_QUANTITY', { id: item.id, quantity: $event.target.value })"
    />
    <button @click="$store.***mit('cart/REMOVE_ITEM', item.id)">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<!-- views/Login.vue -->
<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button :disabled="$store.state.auth.isLoading">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        await this.$store.dispatch('auth/login', {
          username: this.username,
          password: this.password
        });
        this.$router.push('/dashboard');
      } catch (e) {
        alert(e.message);
      }
    }
  }
}
</script>

6.3 高级技巧与最佳实践

6.3.1 使用 Plugins 实现状态持久化

为了避免页面刷新导致状态丢失，可通过插件将部分状态保存至 LocalStorage。

const persistentPlugin = store => {
  const saved = localStorage.getItem('vuex-state');
  if (saved) {
    store.replaceState(JSON.parse(saved));
  }

  store.subscribe((mutation, state) => {
    localStorage.setItem('vuex-state', JSON.stringify({
      auth: state.auth,
      cart: state.cart
    }));
  });
};

// 注册插件
new Vuex.Store({
  plugins: [persistentPlugin]
});

说明： subscribe 监听所有 mutation，每次变更后持久化关键状态。

6.3.2 利用 Vuex Devtools 进行状态调试

Chrome 插件 Vue Devtools 支持对 Vuex Store 的完整追踪，包括：
- 查看当前 State 树
- 浏览 ***mit 历史
- 时间旅行调试（Time-travel debugging）
- Action Dispatch 监控

开启严格模式有助于提前发现非法状态修改：

const store = new Vuex.Store({
  strict: true // 生产环境应关闭
});

6.3.3 性能优化建议

避免过度使用全局状态 ：仅将真正需要共享的状态放入 Store，局部状态仍保留在组件内。
合理使用 Getter 缓存 ：复杂计算尽量放 getter，避免模板中频繁调用方法。
模块懒加载（高级） ：结合 webpack 动态导入，按需加载非核心模块。

store.registerModule('asyncModule', asyncModule);

综上所述，Vuex 不仅是一个状态容器，更是一种工程化思维的体现。通过规范的状态流转机制、清晰的模块划分以及强大的调试工具支持，它帮助开发者构建出高内聚、低耦合、易于维护的企业级前端应用。在后续章节中，我们将结合 UI 库与路由系统，进一步完善整套前端架构体系。

7. 基于MintUI与ElementUI的企业级界面构建实践

7.1 MintUI在移动端项目中的集成与响应式布局设计

MintUI 是由饿了么团队推出的基于 Vue.js 的移动端组件库，专为 H5 应用设计，支持按需引入、主题定制和多语言配置。其轻量级特性使其成为移动电商、营销活动页等场景的理想选择。

安装与按需引入配置

通过 npm 或 yarn 安装 MintUI：

npm install mint-ui --save

为避免全量打包导致体积膨胀，推荐使用 babel-plugin-***ponent 实现按需加载：

npm install babel-plugin-***ponent -D

在 .babelrc 中添加插件配置：

{
  "plugins": [
    [
      "***ponent",
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]
  ]
}

随后可在组件中单独引入所需模块：

import { Button, Cell, Swipe, Toast } from 'mint-ui';

export default {
  ***ponents: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    'mt-swipe': Swipe,
    'mt-toast': Toast
  },
  methods: {
    showToast() {
      this.$toast('操作成功');
    }
  }
}

参数说明 ：
- Button , Swipe 等为 MintUI 提供的 UI 组件；
- Toast 用于非阻塞提示，提升用户体验；
- 按需引入可减少约 60% 的 JS 打包体积。

响应式布局适配方案

MintUI 默认不包含 Flex 布局重置样式，需手动引入 reset.css 并结合 viewport meta 设置实现移动端适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

配合 CSSREM 插件或 PostCSS 配合 postcss-pxtorem 进行单位转换：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 37.5, // 设计稿宽度 / 10（如 375px）
      propList: ['*']
    })
  ]
}

设备类型	屏幕宽度（px）	rem基准值（px）	根字体大小
iPhone SE	320	32	3.2px
iPhone 8	375	37.5	3.75px
iPhone 14 Pro Max	430	43	4.3px
Android 小屏	360	36	3.6px
iPad Mini	768	76.8	7.68px
自定义测试机	414	41.4	4.14px
华为 Mate 40	412	41.2	4.12px
小米 13	413	41.3	4.13px
折叠屏展开态	720	72	7.2px
折叠屏折叠态	384	38.4	3.84px

该表格展示了不同设备下 rem 单位对应的根字体大小计算方式，确保视觉一致性。

7.2 ElementUI 在 PC 后台管理系统中的高级控件集成

ElementUI 是面向桌面端的 Vue 组件库，广泛应用于中后台管理系统，提供强大的表单、表格、导航及权限控制能力。

动态表格与分页联动实现

以用户管理列表为例，展示如何集成 el-table 与 el-pagination 实现数据驱动渲染：

<template>
  <div class="user-management">
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="role" label="角色">
        <template slot-scope="scope">
          <el-tag :type="getRoleTagType(scope.row.role)">{{ scope.row.role }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecords">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalRecords: 0
    };
  },
  mounted() {
    this.fetchUserData();
  },
  methods: {
    async fetchUserData() {
      const res = await this.$http.get('/api/users', {
        params: {
          page: this.currentPage,
          limit: this.pageSize
        }
      });
      this.tableData = res.data.list;
      this.totalRecords = res.data.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchUserData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchUserData();
    },
    getRoleTagType(role) {
      return role === '管理员' ? 'danger' : role === '运营' ? 'warning' : 'primary';
    },
    handleStatusChange(row) {
      this.$message.su***ess(`${row.name} 状态已更新`);
    }
  }
};
</script>

执行逻辑说明 ：
- 表格初始化时请求第一页数据；
- 分页控件触发后重新调用 fetchUserData() 获取新数据；
- slot-scope 允许对列内容进行自定义渲染；
- Switch 开关变更自动同步至服务端并反馈结果。

7.3 UI框架选型对比与工程化集成策略

特性维度	MintUI	ElementUI
适用平台	移动端 H5	PC 端中后台
包体积（min+gzip）	~30KB	~200KB
主题定制方式	SCSS 变量覆盖	Theme Generator 工具生成
表单验证支持	基础输入校验	内置 Form + Rules 强大校验机制
国际化支持	支持 i18n	完整多语言方案
Tree 组件	不支持	支持可拖拽树结构
Table 复杂功能	基础展示	支持固定列、排序、筛选、合并单元格
弹窗层级管理	`$toast` , `$indicator` 轻提示	`MessageBox` , `Notification` 完整体系
社区活跃度	已归档维护	持续更新（Vue 2 & 3）
移动端手势支持	无原生支持	不适用
图标资源	Font Class	SVG Icon + 自定义图标系统

mermaid 流程图：UI 框架选型决策路径

graph TD
    A[项目类型判断] --> B{是否为移动端H5?}
    B -->|是| C[评估交互复杂度]
    B -->|否| D[选用ElementUI]
    C -->|简单展示/营销页| E[采用MintUI]
    C -->|复杂表单/数据操作| F[考虑Vant或其他现代框架]
    D --> G[集成Form/Table/Pagination]
    E --> H[使用Swipe/Button/Toast等基础组件]
    G --> I[结合Vuex管理全局状态]
    H --> I
    I --> J[输出企业级UI原型]

此流程图为团队在技术评审阶段提供了清晰的选型依据，尤其适用于敏捷开发环境中快速决策。

7.4 实战案例：融合路由、状态管理与UI库的后台管理系统搭建

创建一个基于 Vue Router + Vuex + ElementUI 的完整架构示例：

// router/index.js
import Layout from '@/views/Layout.vue'

const routes = [
  {
    path: '/login',
    ***ponent: () => import('@/views/Login.vue')
  },
  {
    path: '/',
    ***ponent: Layout,
    children: [
      { path: '', redirect: '/dashboard' },
      { path: 'dashboard', ***ponent: () => import('@/views/Dashboard.vue') },
      { path: 'users', ***ponent: () => import('@/views/UserList.vue') }
    ]
  }
];

// store/modules/user.js
const state = {
  userInfo: JSON.parse(localStorage.getItem('user')) || null
};

const mutations = {
  SET_USER(state, payload) {
    state.userInfo = payload;
    localStorage.setItem('user', JSON.stringify(payload));
  },
  CLEAR_USER(state) {
    state.userInfo = null;
    localStorage.removeItem('user');
  }
};

const actions = {
  login({ ***mit }, userData) {
    return new Promise(resolve => {
      setTimeout(() => {
        ***mit('SET_USER', userData);
        resolve();
      }, 800);
    });
  }
};

在主应用入口中统一注册 UI 组件与状态：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');