-
开发拓展篇 1:扩充你的开发工具
开发拓展篇 1:扩充你的开发工具
在项目开发中,工具的使用起到了至关重要的作用,正所谓工欲善其事,必先利其器,掌握一些实用的开发工具能够使我们的开发效率事半功倍。
那么我们应该掌握哪些开发工具的使用方法呢?
其实一路走来,我们已经介绍的开发工具包括了 npm、yarn、webpack 以及一些集成在项目中的工具包,这些工具一定程度上都大大简化了我们的开发流程,起到了项目助推剂的作用。
...
2021-10-18 13:01:55 |
FrontEnd
-
开发指南篇 5:Vue API 盲点解析
Vue API 盲点解析
在了解了一些实用的开发技巧和编码理念后,我们在项目的开发过程中难免也会遇到因为不熟悉 Vue API 而导致的技术问题,而往往就是这样的一些问题消耗了我们大量的开发时间,造成代码可读性下降、功能紊乱甚至 bug 量的增加,其根本原因还是自己对 Vue API 的 “无知”。
本文将介绍 Vue 项目开发中比较难以理解并可能被你忽视的 API,唯有知己知彼,才能百...
2021-10-18 13:01:55 |
FrontEnd
-
开发指南篇 4:数据驱动与拼图游戏
数据驱动与拼图游戏
数据驱动是 Vue 框架的核心特性之一,也是 Vue 响应式原理的具体体现,相信大家对其应该深有体会,尤其是在操作数据来触发页面更新的时候。
为了让大家更加了解数据驱动的理念,并解决使用过程中可能出现的一系列问题,本文将结合比较常见和简单的 “拼图游戏” 来展示 Vue 数据驱动的魅力所在。
效果展示
首先我们先来看一下实现的 “拼图游戏” 的动态效果:
在...
2021-10-18 13:01:55 |
FrontEnd
-
开发指南篇 3:合理划分容器组件与展示组件
合理划分容器组件与展示组件
上篇文章我们提到了组件的概念,组件是目前模块化、组件化开发模式中必不可少的单元形式,那么除了其概念和可复用性外,我们对它的职能划分了解多少呢?
本文将立足 Vue 组件的职能来谈谈我个人对于其划分的理解,唯有了解不同类型组件的职能才能编写出可维护、低耦合的前端代码。
组件的职能划分
如果要将 Vue 组件按照职能划分,我们可以将其分为两种类型:容器组件和展...
2021-10-18 13:01:55 |
FrontEnd
-
开发指南篇 2:学会编写可复用性模块
学会编写可复用性模块
在生活中,重复的机械劳动会消耗我们的时间和精力,提高生产成本,降低工作效率。
同样,在代码世界中,编写重复的代码会导致代码的冗余,页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。
在 Vue 项目中,每一个页面都可以看作是由大大小小的模块构成的,即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块...
2021-10-18 13:01:55 |
FrontEnd
-
开发指南篇 1:从编码技巧与规范开始
1:从编码技巧与规范开始
当我们完成项目的构建,进入开发阶段的时候,除了你需要了解框架本身的知识点外,我们还需要提前掌握一些项目的编码技巧与规范,在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题,为项目多人开发提供编码的一致性。
本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量,并会结合代码片段加强大家的理解与认知。
当然不是所有实例都是针对 Vue.j...
2021-10-18 13:01:55 |
FrontEnd
-
构建实战篇 4:项目整合与优化
项目整合与优化
前几小节,我们讲述了 Vue 项目构建的整体流程,从无到有的实现了单页和多页应用的功能配置,但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案,就像大楼造完需要进行最后的项目验收改进一样,有待我们进一步的去完善。
使用 alias 简化路径
使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用,我们可以使用它将复杂的文件路径定义成一个变量...
2021-10-18 13:01:55 |
FrontEnd
-
构建实战篇 3:多页路由与模板解析
多页路由与模板解析
上篇文章中我们成功打包并输出了多页文件,而构建一个多页应用能够让我们进一步了解项目配置的可拓展性,可以对学习 Vue 和 webpack 起到强化训练的效果,本文将在此基础上主要针对多页路由及模板的配置进行系列的介绍。
路由配置
1. 跳转
在配置路由前,首先我们要明确一点就是,多页应用中的每个单页都是相互隔离的,即如果你想从 page1 下的路由跳到 page2...
2021-10-18 13:01:55 |
FrontEnd