• 构建实战篇 1：单页应用的基本配置
  构建实战篇 1：单页应用的基本配置 前几篇文章我们介绍了 Vue 项目构建及运行的前期工作，包括 webpack 的配置、环境变量的使用等，在了解并掌握了这些前期准备工作后，那么接下来我们可以走进 Vue 项目的内部，一探其内部配置的基本构成。 配置 1. 路由配置 由于 Vue 这类型的框架都是以一个或多个单页构成，在单页内部跳转并不会重新渲染 HTML 文件，其路由可以由前端...
  2021-10-18 13:01:55 | FrontEnd
• 构建基础篇 3：env 文件与环境设置
  构建基础篇 3：env 文件与环境设置 在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？ 这里就需要引入环境的概念。 一般一个项目都会有以下 3 种环境： 开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额...
  2021-10-18 13:01:55 | FrontEnd
• 构建基础篇 2：webpack 在 CLI 3 中的应用
  构建基础篇 2：webpack 在 CLI 3 中的应用 webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。 而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，...
  2021-10-18 13:01:55 | FrontEnd
• 构建基础篇 1：你需要了解的包管理工具与配置项
  包管理 任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。 本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。 介绍 相信大家对于包管理工具的使用一定不会陌生，毕竟它已经成为前端项目中必不可少的一部分，为了照顾部分零基...
  2021-10-18 13:01:55 | FrontEnd
• 开篇：Vue CLI 3 项目构建基础
  序言 大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。 我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。 Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相...
  2021-10-18 13:01:55 | FrontEnd
• Vuex 状态管理的工作原理
  为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时，经常会遇到一些组件间共享的数据或状态，或是需要通过 props 深层传递的一些数据。 在应用规模较小的时候，我们会使用 props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。 但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。 这个时候，我们...
  2021-10-18 13:01:55 | FrontEnd
• 批量异步更新策略及 nextTick 原理
  为什么要异步更新 通过前面几个章节我们介绍，相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了。 简单回顾一下，这里面其实就是一个“setter -> Dep -> Watcher -> patch -> 视图”的过程。 假设我们有如下这么一种情况。 <template> <div> <...
  2021-10-18 13:01:55 | FrontEnd
• 数据状态更新时的差异 diff 及 patch 机制
  数据更新视图 之前讲到，在对 model 进行操作对时候，会触发对应 Dep 中的 Watcher 对象。 Watcher 对象会调用对应的 update 来修改视图。 最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上。 这一章就来介绍一下这个 patch 的过程，因为 patch 过程本身比较复杂，这...
  2021-10-18 13:01:55 | FrontEnd