最初の方法は、コンポーネントライブラリのフロントエンドサービスを提供することで、そのような要素、iViewに、Antのデザインのように、この時点で、開発手法を開発者である。そして、ページとパッチワークのアセンブリコード、およびコード・ロジックを記述します。
第2フロントエンドサービスの道組み立てた後、ビジュアル・ページ・アセンブリ・システムを提供し、フロントエンドエンジニアリングシステム出力源は、視覚化テンプレート生成プロジェクトを通じて、開発者はコードのみのロジックを記述する必要があり、フロントエンドコンポーネントに焦点を当てる必要はありません、多くのフレームワークがありますツールは、参照することができます。
サービスのフロントエンドの究極の方法は、完全なダイナミックロジックもIDEを書いて、直接開発IDEです。
可視化は、HTMLツリー、データ融合、及び有機ダイナミックロジックのビルド構成をベースにしています。生成され、更新されたページを実装するための設定データを変更するための視覚的な相互作用。だから、大幅フロントエンド開発の効率を向上させることができ、開発の構成を実現するために、すべての最初の必要があります。
関連パターン：
動的コンポーネント：動的レンダリング構成要素に応じてコンフィギュレーションデータ構造、。
ツリー：ツリーの各内部ノードが表す構造、テスト属性は、各ブランチは、各リーフノードが表す、テスト出力を表しているカテゴリを。
メディエータモード：統合管理パッケージとの間の複数のオブジェクトの通信に依存します。各オブジェクトは、明示的に必要としない式の相互に連結する、参照を緩いです。
ページ区：
FilterBox ：時間、ラジオ、カスケード、クエリボタンの下にクエリパラメータ制御データを生成します。
IndexCardBox ：FilterBox パラメータ転送インターフェース、表示データを得戻ります。
trendBox ：よるFilterBoxのフィルタパラメータ、およびIndexCardBox インデックスカード選択チューンインターフェースの傾向を表示します。
プログラムの流れ：
グローバルstore.js
1は、導出例のVUE、状況を、軽量ページストアを達成するために、ページのコンポーネント間の通信を管理します。
2、メンテナンス、動的パスタイプマップを形成します。VUE非同期の動的コンポーネントを使用してください。必要な構成ページ・コンポーネント・ツリー、動的なレンダリングを表示し、設定可能なデータのページ構造を実現。
3、根据中介者模式实现模块之间的参数依赖。各模块可向全局发送state状态，根据stateLoginMap中的依赖关系，收集参数传入其他模块，并触发钩子函数更新数据。
模块Box
1、this.$loaded加载状态：
异步组件，初始化data中loading设为false，手动调用this.$loaded(true)转换状态；
同步组件，会在mounted钩子中自动调用this.$loaded(true)转换状态；
this.$loaded(true)标志完成加载并已经向全局发送state状态，
被依赖的模块的会在模块loading状态全为true后，才能触发paramsChange钩子.
2、 paramsChange钩子，接收变化
在依赖state变化后，会组装成params传入模块，触发模块的paramsChange钩子。
从this.store.params中获取最新的参数，更新数据展示。
3、 this. $commit 提交state变化
触发全局中 [components]-refresh向顶层发送筛选参数，自定义方法覆盖storeMixins自动的赋值，合并到全局的state对象中。
模块Box-filterBox
组件树components和动态逻辑logicMap完全由store控制。
1、 组件树配置。如下一个简单下拉选项，可见
type为组价类型，
refKey为组件的唯一识别，
paraKey为组件向全局输出参数的字段名，
options为组件展示需要的数据，可以异步赋值
2、 动态逻辑。有两种形式
一种按照决策树的算法结构，如上logicMap，实现简单的依赖关系。可实现当plus_type筛选组件选择formal值时，渲染对应数组内的组件；当选择prob值时，渲染另外状态的组件。
更复杂的动态逻辑，在filterBoxRefres钩子函数中实现。在filterBox的筛选项变化时，会触发类型为watch的钩子函数，可修改组件的渲染状态；在初始化加载完以及点击查询按钮时，会触发类型为emit的钩子函数，可以整理参数的结构再下发给依赖的模块
组件-selectFilter
普通模块可以使用各种通用组件库，但FilterBox模块的组件需要自行封装来匹配模块的运行。
1、 this.$updateFilter()向上级模块发送选择的值。
同步或异步初始化完成，选择变化，显示隐藏转换等状态变化都需要及时调用更新状态值，便于更新筛选组件之间的动态更新。
2、this.store 获取配置项，监听变化及时更新状态。