vue.js组件化开发实践

Posted 2020-08-02

前言

公司以往制作一个H5活动，特别是有一定统一结构的活动都要每次用html、css、js滚一次重复的轮子，费时费力。后来接到了一个基于模板的活动发布系统的需求，于是就有了下面的内容。

 

开始

需求一到，接就是怎么实现，技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架的流行，以及组件化开发方式的出现，决定采用vue进行开发。

这里首先简单说下web前端组件化开发方式的历程：

最早的组件化结构，或者叫做组件化1.0时代，代码结构可能如下：

1 - lib/components/calendar
2   |- calendar.css
3   |- calendar.js
4   |- calendar.html

将同功能的组件文件放到同一目录下，结构清晰、职责明确，视图、样式、脚本的关系显著，也易于单元测试，是独立展示和交互的最小单元

组件化2.0：

在1.0基础上对组件进行了生命周期的加工，理顺了组件的各个阶段，有助于对组件实现（从初始化到销毁）的理解。并且借助于组件各个阶段的钩子可以对组件有更好的利用和扩展。而且数据绑定的加入，也让整个层级上升了一个level。ExtJs、YUI等都是这方面的专家。

3.0时代：

有了2.0发展，进步是很大的，但依然不够。组件的可复用性（基础样式，基础逻辑，基础属性、可复用的稳定业务逻辑等），甚至是能否有更好的代码组织方式等依然是问题。angular、React、Polymer、Vue等mvvm框架和webpack、browserify等构建工具的出现正在解决这些问题。