Tofu

Vue-TS 项目中 TypeScript 相关配置介绍 安装了 TypeScript 相关的依赖项 dependencies 依赖： 依赖项 说明 vue-class-c...

服务端渲染 概述 SPA 单页面应用 优点： 用户体验好； 开发效率高； 渲染性能好； 可维护性好； ... 缺点： 首屏渲染时间长； 不利于 SEO； 借鉴了传统的服务端...

Vuex 状态管理 组件内装填管理流程 状态管理 通过状态集中管理和分发，解决多个组件共享状态的问题； state：驱动应用的数据源； view：以声明方式将 state ...

模拟 Vue.js 响应式原理 数据驱动 数据响应式、双向绑定、数据驱动 数据响应式 数据模型仅仅是普通的 javascript 对象，而当我们修改数据时，视图会自动更新，...

Vue-Router vue-router 的基础使用 1. Vue.use 注册路由插件： router.js 文件 Vue.use 用于安装插件。 Vue.use(pl...

Gulp Gulp 可以说是当下最流行的前端构建系统，特点是：高效、易用。其使用过程非常简单，大致过程如下： 基本使用 1. 初始化工作： 2. 编写 gulpfile.j...

Grunt Grunt 的基本使用 1. 初始化项目 2. 添加 grunt 模块 3. 添加 gruntfile.js 文件 项目根目录下添加 gruntfile.js ...

常用的自动化构建工具 Grunt： Grunt 最早的前端构建系统。拥有完善的插件生态，其插件几乎可以自动化完成任何事情。 但是其工作过程基于临时文件去实现的，因此其构建速...

自动化构建 自动化：通过机器代替手工去完成一些工作。 构建：把一个东西转换成另一个东西。 开发行业当中的 自动化构建：把开发阶段中的源代码自动化的转化为生产环境中可运行的代...

脚手架的工作原理 初始化项目 指定 cli 应用入口文件 package.json 文件中添加 bin 字段，用于指定 cli 应用的入口文件; 编写 cli 入口文件（c...

Plop Plop 具体使用 安装 Plop 新建 plopfile.js 文件 创建模板文件 新建模板文件夹 —— plop-templates 文件夹； 新建模板文件（...

Yeoman Yeoman 是一个可以帮助开发者快速开启一个新项目的工具集。 Yeoman 提出一个 Yeoman 工作流的概念，通过脚手架工具（yo），构建工具（grun...

脚手架工具的概要； 前端工程化的发起者； 创建项目基础结构、提供项目规范和约定； 脚手架工具可以解决的问题； 如何学习脚手架； 常用的脚手架工具；...

工程化 ≠ 某个工具 在现阶段有部分工具功能过于强大，如：webpack，这就导致了很多人误认为工程化就等于某个工具，只要使用了 webpack 就代表有了工程化。 其实不...

工程化表现 一切重复的工作都应该被自动化 创建项目： 创建项目结构； 创建特定类型文件； 编码： 格式化代码； 校验代码风格； 编译/构建/打包； 预览/测试： Web S...

工程化的概述 前端工程化 “前端工程化”之所以近些年被广泛关注和探讨，主要原因是现在的前端应用功能要求不断提高、业务逻辑日益复杂。 面临的问题 想要使用 ES6+ 新特性，...