Vue2实践揭秘

c#小王子 2021-08-27 871 Vue

Vue2实践揭秘

内容简介

本书以Vue2 的实践应用为根基，从实际示例入手，详细讲解 Vue2 的基础理论应用及高级组件开发，通过简明易懂的实例代码，生动地让读者快速、全方位地掌握 Vue2 的各种入门技巧以及一些在实际项目中的宝贵经验。

本书除了全面、细致地讲述 Vue2 的生态结构、实际编程技巧和一些从实践中得到的经验，还重点介绍如何以组件化编程思想为指导，以前端工程化方法为实现手段来实践 Vue2，通过组件的单元测试和 E2E测试来保证工程质量。

内容介绍

本书以 Vue2 的理论为中心，以实战示例为基础，通过示例应用展开覆盖 Vue 的各个理论知识点。本书从实践应用出发，对 Vue 官方未曾进行详尽说明甚至不曾提及的实用内容进行揭秘，试图使此书能成为你在 Vue 前端工程化开发实战中的参考手册。本书主要从多个示例由浅入深地讲述 Vue 的使用知识，除此之外，还重点介绍了 Vue 工程化开发中必备的源码库、第三方开发工具以及如何对 Vue 的各种模块进行全方位的测试。

第 1章从一个经典的"待办事项"（TODOs）示例入手，从零开始介绍 Vue 的入门知识，包括插值、数据绑定、属性与样式绑定和组件的基本概念与用法。

第2章讲述如何为 Vue 建立一个真实的工程化开发的环境，以及工程化环境下第三方工具的基本使用与配置，其中包括∶ vue-cli、webpack、Karma、Phantom、Mocha、Sinon、 Chai 和 Nightwatch。

第3 章介绍 Vue 的路由机制和 Vue 生态系统中最重要的一个成员——vue-router 的基本使用方法。

第 4章通过手机书店示例来介绍组件化理论与 Vue 组件的设计与实现的具体方法，包括抽象组件的基本方法，如何用 Vue 对组件进行封装，如何从界面中提取公共的数据接口，如何在没有实现服务端的情况下运行 Vue 程序以及怎样创建复杂的复合型组件。

第5章全方位地讲述 Vue 的测试与调试过程中使用到技术与工具，包括 Mocha 的使用方法，如何为组件编写单元测试，如何在运行期和单元测试中进行调试，如何进行端对端测试。

第6章通过一个非常普遍且实用的图书管理示例讲述 Vue 在实现一个具有复杂操作的界面时所采用的技术知识点，以及 Vue 组件的高级用法。例如视图的排序、分页、查找，多行删除的设计与实现，通过表单处理图书数据的添加、编辑和数据验证，如何用组件化的设计方法封装 Vue 组件以实现最大限度的组件重用。

第 7章介绍 Vue 生态结构中针对规模庞大的前端程序进行状态管理的利器 Vuex，通过实例对 Vuex 的应用原则和结构组成进行一一剖析，讲述如何将各种本来混乱的组件状态通过 Vuex 来将其进行分离，每个部分应该如何设计与编码，如何进行测试，最终使 Vue前端工程架构变得更为合理。

第 1章例说Vue.js

本章将通过极具代表性的 Todo 的示例作为引领读者进入 Vue.js 大门的引子。我会以实践为第一出发点，从零开始一步一步地构造一个单页式的 Todo 应用，在这个过程中会将 Vue.js 相关的知识点融入其中，在实际应用中展现这个"小"而"强"的界面框架。

我们先来看看最终希望构造出一个什么样的 App∶

Vue.js 与 Angular2 和 React 相比，让我感觉最舒适的是它在一开始就为我们铺平了入门的道路，这就是它的脚手架 vue-cli。因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入 Vue.is 开发的殿堂。然而，现在我并不打算详细地介绍这个脚手架工具，先让我们一起从使用体验来感性地认识它，在后面的章节中我会详细地介绍这个工具。

在开始动手之前，必须先得在机器上安装好 npm，然后输入以下指令将 vue-cli 安装到机器的全局环境中∶

 s npm 1 vue-cl1-

然后，我们就可以开始建立工程了，键入以下的指令∶

  s vue init webpack-simple vue-

此时控制台会提出一些关于这个新建项目的基本问题，直接"回车"跳过就行了。然后进入 vue-todo 目录，安装脚手架项目的基本支持包∶

 s npm 1

安装完支持包后键入以下指令就可以运行一个由脚手架构建的基本 Vue.js 程序了∶

 S npm run dev lbo

Vue2与 Vuel.x 相比有了很大的区别，从最小化的运行程序开始了解 Vue 是一种绝佳的途径，先从 main.js 文件入手∶

import Vue from ' vue' 

import App from '. /App. vue' 

 

new Vue ({

    el:'#app'; 

    render; h => h(App)

}）

这里就运用了 Vue2 新增的特色 Render 方法，如果你曾用过 React，是不是有一种似曾相识之感?确实，Vue2 甚至连渲染机制都与 React 一样了。为了得到更好的运行速度，Vue2也采用了Virtual DOM。如果你还没有接触过 Virtual DOM，并不要紧，现在只需要知道它是一种比浏览器原生的 DOM 具有更好性能的虚拟组件模型就行了，我们会在稍后的章节中再来讨论它。

我们需要知道的是，通过 import 将一个 Vue.js 的组件文件引入，并创建一个 Vue 对象的实例，在 Vue 实例中用 Render 方法来绘制这个 Vue 组件（App）就完成了初始化。

然后，将 Vue 实例绑定到一个页面上，真实存在的元素 App Vue 程序就引导成功了。打开 index.html 文件就能看到 Vue 实例与页面的对应关系

<!DocTYPE html>

<html lang="en">

<head>

     <meta
charset="utf-8">

</head>

<boay->

    <!-- Vue 实例所对应的页面元素 -->

    <div
id="app"></div>

    <!-- 由 webpack 编译后的运行文件 -->

    <script src="
/dist/build.js"></script>

</body>

</html>

也就是说，一个 Vue 实例必须与一个页面元素绑定。Vue 实例一般用作 Vue 的全局配置来使用，例如向实例安装路由、资源插件，配置应用于全局的自定义过滤器、自定义指令等。在本章示例中，我们只需要知道它的作用就可以了。

我们需要了解的是 App.vue 这个文件，*.vue 是 Vue.js 特有的文件格式，表示的就是一个 Vue 组件，它也是 Vue.js 的最大特色，被称为单页式组件。"*.vue"文件可以同时承载"视图模板"、"样式定义"和组件代码，它使得组件的文件组织更加清晰与统一。

【下载地址】

链接：https://pan.baidu.com/s/1VfZlcfwCKnIh6-5OkIq0dA

提取码：1z7o

Vue2实战

本书以 Vue.js 2 为基础，以项目实战的方式来引导读者渐进式学习 Vue.js。本书分为基础篇、进阶篇和实战篇三部分。

Vue2实践揭秘

本书以 Vue2 的理论为中心，以实战示例为基础，通过示例应用展开覆盖 Vue 的各个理论知识点。本书从实践应用出发，对 Vue 官方未曾进

Vue2权威指南

Vue.，js 是一个用来开发 Web 界面的前端库。本书致力于普及国内 Vue.js 技术体系，让更多喜欢前端的人员了解和学习 Vue.j

《Vue.js项目开发实战》