點擊上方“IT平頭哥聯(lián)盟”，選擇“置頂或者星標”

與你一起成長～

前言

最近公司也在計劃做可視化配置平臺，從本文原作者(騰訊AlloyTeam@陳韓杰)的分析中得到了不少啟發(fā)，故分享給大家。

正文從這開始～～

背景

頁面可視化搭建工具, 是互聯(lián)網(wǎng)公司中常見的運營工具, 實現(xiàn)了運營人員快速生成和發(fā)布頁面, 提升頁面上線效率; 且無需開發(fā)人員介入, 節(jié)省開發(fā)人力.

頁面可視化搭建工具搭建出的頁面示例:

但從零開始設計和開發(fā)出這種工具并不簡單. 作者維護的頁面可視化搭建框架 pipeline, 提供了頁面可視化搭建的核心功能, 免去從零實現(xiàn)頁面可視化搭建工具的困難.

本文主要包含以下內(nèi)容:

• 活動頁面重復開發(fā)的痛點.

• 開發(fā)可視化搭建工具的技術要點.

• 理想的運營頁面可視化搭建工具.

• 開源頁面搭建框架 pipeline 介紹.

活動頁面開發(fā)之痛

活動頁面特點

前端業(yè)務中, 經(jīng)常需要開發(fā)產(chǎn)品介紹頁/營銷頁/活動頁/圖片展示頁等頁面. 這類需求有以下幾個特點:

• 頁面類似: 頁面布局和業(yè)務邏輯較固定.

• 需求高頻: 每周甚至每天有多個這種需求.

• 迭代快速: 開發(fā)時間短, 上線時間緊.

• 開發(fā)性價比低: 開發(fā)任務重復, 消耗各方的溝通時間和人力.

活動頁面常規(guī)開發(fā)流程

活動頁面常規(guī)開發(fā)流程圖

流程

運營/產(chǎn)品提出頁面需求.

走項目流程進入開發(fā)環(huán)節(jié).

開發(fā)根據(jù)設計稿完成頁面開發(fā).

測試進行頁面測試.

運維進行頁面上線.

運營/產(chǎn)品進行頁面驗收.

痛點

• 多方參與, 反復溝通,?串行流程.

• 頁面上線周期長, 無法快速響應活動需求.

• 人力陷入重復工作泥潭, 忙碌而低效.

更優(yōu)的流程

對于高頻和重復的活動頁面開發(fā), 業(yè)界一般將頁面做成配置化, 配置工作從開發(fā)人員交接給產(chǎn)品/運營等需求方; 開發(fā)和設計人員只需提供配置化頁面支持. 更優(yōu)的活動頁面生成流程依靠頁面可視化搭建系統(tǒng)來實現(xiàn).
現(xiàn).

更優(yōu)的活動頁面開發(fā)流程圖

流程

運營/產(chǎn)品提出頁面需求.

運營/產(chǎn)品在頁面可視化搭建系統(tǒng)中選取合適的頁面模板進行頁面搭建.

頁面自動化發(fā)布上線,?頁面需求完成, 流程完結.

如果運營/產(chǎn)品沒有找到合適的模板.

開發(fā)進行頁面模板開發(fā), 并將頁面模板添加到頁面可視化搭建系統(tǒng)中.

運營/產(chǎn)品繼續(xù)流程2.

同時, 隨著頁面可視化搭建系統(tǒng)中的頁面模板不斷豐富, 新的頁面需求對開發(fā)人員的依賴逐漸減低, 可由運營/產(chǎn)品直接完成.

頁面可視化搭建工具

更優(yōu)的活動頁面開發(fā)流程依靠頁面可視化搭建系統(tǒng)實現(xiàn), 重點是要有頁面可視化搭建工具提供技術支持.?頁面可視化搭建工具通過填寫配置數(shù)據(jù)表單, 拖拉頁面組件等可視化的頁面編輯方式, 實現(xiàn)頁面的生成或修改.

但從零開始設計和開發(fā)出頁面可視化搭建工具并不簡單, 有幾個需要了解和關注的技術點.

頁面可視化搭建工具的技術要點

從技術角度, 設計和開發(fā)一個頁面可視化搭建工具時, 需要考慮以下幾個技術要點:

• 頁面組件化

• 頁面模板

• 頁面可視化編輯

• 組件層級關系

• 頁面打包

• 實時預覽

• 頁面組件開發(fā)

頁面組件化

組件化的優(yōu)點

頁面的基本單元是 HTML 元素, 但是 HTML 元素無法包含業(yè)務邏輯, 且由 HTML 元素直接組合出頁面, 過于繁雜和低效.

圖片來源:?https://vuejs.org/images/components.png

頁面較好的組織方式是組件化, 如上圖所示. 組件是對 HTML 元素、元素布局和樣式、業(yè)務邏輯的封裝. 通過組件封裝業(yè)務邏輯, 并通過組件屬性(Props)向外暴露組件的配置字段. 采用頁面組件化, 復雜的頁面可視化搭建可以轉化為2個較簡單的操作:

• 組件樹組合, 頁面可視化搭建變成頁面組件的可視化組合.

• 組件配置編輯, 將對頁面內(nèi)容的編輯轉化為對組件的配置屬性(props)修改.

頁面前端框架

頁面組件化需依靠前端框架來實現(xiàn). 頁面可視化搭建工具的架構方式對頁面前端框架有限制: 需選擇頁面可視化搭建工具支持的前端框架. 如: 頁面可視化搭建工具只支持基于 vue 的頁面, 那頁面組件化的前端框架只能選擇 vue.

但是前端技術團隊選用的前端框架, 一般已用于支持現(xiàn)有業(yè)務, 并沉淀了一定數(shù)量的技術組件和業(yè)務組件. 如果需要針對頁面可視化搭建工具進行前端框架的切換, 成本將會很大.

所以理想的頁面可視化搭建工具, 應該和頁面的前端框架解偶, 如下圖所示. 技術團隊在某前端框架中沉淀的技術組件和業(yè)務組件, 可在頁面可視化搭建工具的頁面中復用.

技術難點1:頁面可視化搭建工具與頁面前端框架解偶.

當然, 前端業(yè)務已選用了某前端框架, 開發(fā)專門支持該前端框架的頁面可視化搭建工具, 也是高效實現(xiàn)目標的選擇.

頁面模板

頁面模板包含完整的業(yè)務邏輯, 有助于快速生成業(yè)務頁面. 不同的頁面模板適用于不同的業(yè)務功能, 從模板庫中選擇合適的頁面模板并派生出默認業(yè)務頁面, 再對默認頁面進行可視化編輯, 從而生成目標業(yè)務頁面.

云鳳蝶的頁面模板列表:

圖片來源:?https://www.yunfengdie.com/

模板帶有頁面的默認數(shù)據(jù); 對于組件化的頁面, 模板是從組件庫中選取部分組件, 并帶有各個組件的默認配置數(shù)據(jù).

如上圖所示, 頁面組件庫中有組件A, 組件B, 組件C, 組件D, …, 組件X等. 頁面模板一由組件庫中的組件A, 組件B和組件C組成, 實現(xiàn)了一個完整的業(yè)務功能; 頁面模板二由組件庫中的組件A, 組件B和組件X組成, 完成另一個完整的業(yè)務功能.

頁面編輯

頁面由頁面組件組合而成, 頁面的編輯其實是對頁面組件進行重新組合, 并編輯各頁面組件的內(nèi)容. 頁面編輯包含2個部分: 編輯頁面組件和編輯頁面內(nèi)容.

編輯頁面組件

組件樹

使用組件化的方式來組織頁面, 頁面可以認為是一棵組件樹, 如下圖所示, 樹中的節(jié)點為頁面組件, 頁面組件可以包含子組件.

在代碼編寫上, 通過組件標簽的組合來聲明一棵組件樹, 并在打包時生成頁面資源, 在運行時加載頁面資源渲染出頁面.

react 和 vue 的組件樹聲明示例:

編輯頁面組件的一個可行方式是: 動態(tài)地給頁面源碼添加組件, 然后重新打包生成頁面. 如通過可視化的方式替換?Left組件?為?NewLeft組件?后, 對源碼的組件樹聲明做替換, 將?Left?標簽替換為?NewLeft?標簽.

動態(tài)組件

一些前端框架支持動態(tài)組件, 可以根據(jù)組件樹聲明動態(tài)渲染出組件, 而無需在構建前就定義好頁面的組件樹結構. 對動態(tài)組件頁面實現(xiàn)可視化組件編輯時, 可以只編輯組件樹聲明文件, 然后將組件樹聲明傳入提前打包好的頁面中進行渲染. 采用動態(tài)組件可以避免重新打包的耗時, 快速生成新頁面.

Vue 根據(jù)組件樹聲明動態(tài)地渲染組件示例如下圖, vue 動態(tài)組件使用?compontent?關鍵字來聲明, 并通過?is?屬性來決定實例化的具體組件. 對于 react, 組件是一個 js 對象, 直接在 jsx 中按照組件名稱返回對應組件就可以了.

編輯頁面內(nèi)容

組件化頁面的頁面內(nèi)容編輯, 是對頁面中各個組件的組件屬性(Props)進行配置.

組件配置數(shù)據(jù)

一個組件包含組件屬性(Props), 組件狀態(tài)(State), 組件HTML模板(Template), 組件業(yè)務邏輯(Javascript), 組件樣式布局(Style)等幾個部分.

組件的配置數(shù)據(jù)通過組件暴露的 Props 注入到組件中, 在組件內(nèi)部 Props 作為常量分發(fā)給 State, Template, Javascript, Style 等其他組件內(nèi)容, 由組件內(nèi)容渲染出視圖.

組件差異化

組件是業(yè)務內(nèi)容的呈現(xiàn)載體, 不同的業(yè)務內(nèi)容, 封裝在不同的業(yè)務組件中. 所以頁面模板中的組件是差異化的, 差異點體現(xiàn)在組件的 Props, State, Template, Javascript, Style 等組件內(nèi)容上. 在編輯不同組件內(nèi)容時, 組件配置數(shù)據(jù)的數(shù)據(jù)結構是也是差異化的.

如下圖示的頁面包含3個組件: 頭部組件, 間隔區(qū)組件和天氣組件. 頭部組件的配置數(shù)據(jù)為頭部標題和頭部圖片等; 間隔去組件的配置數(shù)據(jù)為間隔提示文本等; 天氣組件的配置數(shù)據(jù)為城市名稱. 不同的組件需要不同的配置數(shù)據(jù).

需要為各組件差異化的配置數(shù)據(jù)定義數(shù)據(jù)結構和字段類型, 理想的配置數(shù)據(jù)格式為?JSON, 因為其格式靈活, 支持數(shù)據(jù)嵌套, 且前端友好.

組件配置表單

頁面可視化搭建工具的主要使用人員是運營/產(chǎn)品, 如果讓運營/產(chǎn)品人員直接編輯文本格式的組件配置數(shù)據(jù), 操作不友好并且容易出錯. 需提供可視化的編輯方式 — 使用?Form 表單來填入配置數(shù)據(jù). Form 表單是頁面中數(shù)據(jù)交互的基本形式, 非開發(fā)人員使用也沒有技術門檻. 使用配置表單來填入配置數(shù)據(jù)有2個好處:

• 配置表單交互功能完善, 容易使用.

• 配置表單可以添加校驗邏輯, 避免填入錯誤的配置數(shù)據(jù).

如上圖所示, 由于組件配置數(shù)據(jù)的差異化, 組件配置表單也是差異化的, 需為組件庫中的每個組件提供相應的配置表單. 如果為每個組件都編寫一個表單頁面, 工作量較大; 對于復雜的配置項, 表單頁面的編寫工作量可能會大于頁面組件的開發(fā)工作量. 需要重點考慮提供配置表單的方式.

技術難點2: 如何用最簡單的方式生成配置數(shù)據(jù)編輯表單.

組件層級關系

組件樹定義了組件間父子兄弟的層級關系, 父子組件通過數(shù)據(jù)流和事件進行關聯(lián): 數(shù)據(jù)從父組件的 State 傳遞到子組件的 Props; 子組件的變更觸發(fā) Event 通知父組件.

層級關系對數(shù)據(jù)流和布局的影響

頁面可視化搭建工具編輯組件樹時, 會修改組件數(shù)據(jù)流. 而不同組件的 Props 和 State 是異構的, 在編輯組件樹時, 需要處理不同組件產(chǎn)生層級關系后對數(shù)據(jù)流的影響. 如下圖, 父組件的 State 只包含子組件A的 Props, 將子組件B掛載為父組件的子組件, 父組件沒有子組件B的 Props, 會導致無法渲染子組件B.

同理, 不同的組件有不同的樣式布局, 編輯組件樹時, 需要處理不同組件產(chǎn)生層級關系后帶來的布局影響.

圖片來源:?https://alligator.io/react/using-this-props-children/

如下圖, 一個父組件為行內(nèi)組件, 給其添加一個塊級組件作為子組件, 渲染后可能會導致行內(nèi)組件被塊級組件撐開.

所以設計頁面可視化搭建工具的組件樹編輯功能時, 需要重點關注組件樹的層級關系, 解決組件間數(shù)據(jù)依賴和組件間布局適配問題. 頁面可視化搭建工具需要制訂組件嵌套的規(guī)則和約束, 通過組件嵌套規(guī)則來確保可視化編輯后的組件樹正常渲染.

技術難點3: 如何組織頁面組件的層級關系.

使用組件嵌套的搭建工具示例:

圖片來源:?https://github.com/jaweii/Vue-Layout

不嵌套的前端框架組件

可以想象, 組件的嵌套會加大頁面可視化搭建工具的架構設計和開發(fā)難度.

我們注意到, 營銷活動的主要平臺是移動端, 移動端頁面的常用的布局策略是: 寬度鋪滿, 高度滾動. 如果前端框架組件都設置為鋪滿寬度, 頁面展示時組件只需在瀏覽器垂直方向上順序排列, 則組件組合時不需要嵌套 — 所有組件互為兄弟節(jié)點.

這種鋪滿頁面寬度的組件, 非常適合搭建移動端頁面的場景: 在承載頁面邏輯的同時, 使得頁面的編輯更加簡單, 使用者只需處理組件的順序, 無需處理組件的嵌套.

在移動端, 使用非嵌套組件層級規(guī)則的頁面可視化搭建工具有:?阿里云鳳蝶、pipeline?等.

阿里云鳳蝶圖示:

可視化搭建PC端中后臺系統(tǒng)頁面的工具, 同樣可以采用不嵌套組件層級規(guī)則, 如阿里的飛冰:

頁面預覽

頁面實時預覽是頁面可視化搭建工具的必要部分, 使用人員可以在通過頁面預覽來查看和驗證可視化編輯的效果.

頁面預覽示例:

用戶的可視化編輯包括修改組件樹和修改組件配置數(shù)據(jù). 如下圖, 用戶修改頁面后, 需要重新渲染頁面組件, 得到新的預覽頁面.

實現(xiàn)頁面預覽有兩種方式:?頁面掛載和后臺渲染.

頁面掛載

頁面掛載指在編輯器前端頁面的某個元素節(jié)點(div)上渲染出用戶編輯的效果. 頁面掛載流程圖如下:

使用頁面掛載的預覽方式, 編輯器前端頁面需要提供組件庫組件渲染環(huán)境(組件庫前端框架); 為實現(xiàn)前端渲染, 編輯器前端源碼需引入組件庫組件源碼, 后續(xù)組件庫更新, 編輯器需要同步更新. 頁面掛載方式有以下特點:

• 實現(xiàn)頁面預覽技術方案可行, 實時渲染速度快.

• 為實現(xiàn)渲染, 編輯器的技術選型需和組件庫前端框架一致.

• 編輯器源碼和組件庫源碼耦合.

• 組件庫組件渲染后的代碼邏輯和樣式布局, 可能會污染編輯器頁面.

后臺渲染

后臺渲染指在后臺進行用戶編輯結果頁面的渲染和生成, 編輯器前端頁面通過 iframe 加載和展示結果頁面. 后臺渲染流程圖如下:

使用后臺渲染的預覽方式, 編輯器前端頁面并不需要渲染組件庫的組件; 甚至不需要組件源碼, 只需知道各個組件的描述信息. 后臺渲染有以下特點:

• 可以實現(xiàn)編輯器和組件庫前端框架的分離.

• 可以實現(xiàn)編輯器和組件庫各組件的分離.

• 可以避免預覽頁面的邏輯和樣式污染編輯器環(huán)境.

• 要求后臺和組件庫提供頁面后臺渲染能力, 并要求后臺渲染速度快, 用戶需要”實時”預覽.

難點4: 如何實現(xiàn)組件庫的快速后臺渲染, 從而實現(xiàn)編輯器和組件庫前端框架的分離.

頁面構建

頁面構建是組件化前端源碼生成頁面資源的必要環(huán)節(jié): 在開發(fā)時需要進行開發(fā)構建來進行頁面調(diào)試; 在可視化編輯后可能需要重新構建來生成預覽頁面; 在發(fā)布前需要進行生產(chǎn)構建.

在可視化搭建頁面時需要“實時”預覽, 要求頁面頁面構建效率高, 實現(xiàn)快速的構建和打包. 更進一步, 后臺渲染其實和服務端渲染很像, 能否借鑒服務端渲染的技術思路.

自定義模板和組件開發(fā)

頁面可視化搭建工具在業(yè)務中的落地, 需要根據(jù)不同的業(yè)務場景進行業(yè)務組件和頁面模板的自定義開發(fā). 這對頁面可視化搭建工具提出3個要求:

• 頁面可視化搭建工具要支持業(yè)務現(xiàn)有的前端框架.
  避免后續(xù)組件和模板自定義開發(fā)時的工作量和割裂感. 我們是希望復用現(xiàn)有前端框架組件, 而不是用另一個前端框架重寫一遍.

• 組件和模板的編寫方式需遵循較簡單的編寫約定, 避免開發(fā)人員難上手和寫起來不舒服.

• 自定義模板和組件和在開發(fā)模式下進行調(diào)試和測試.
  頁面可視化搭建工具必然會對頁面模板和頁面組件的編碼方式進行限定. 這要求就頁面可視化工具在頁面模板和頁面組件上的約束較少, 減少對前端框架代碼組織方式的入侵點.

理想的活動頁面可視化搭建工具

頁面可視化搭建工具, 需要對頁面做一些約定和約束, 在可視化搭建時遵循工具約定和約束來編輯頁面. 從頁面可視化搭建工具的技術要點中, 可以歸納出活動頁面可視化搭建工具的理想形態(tài).

頁面可視化搭建工具有不同的框架設計和實現(xiàn)方式, 不同的功能有不同的適用場景, 詳細分類可以參考筆者以前的文章:?https://github.com/CntChen/cntchen.github.io/issues/15

概述

運營頁面搭建工具, 實現(xiàn)基于模板的頁面生成; 將頁面的邏輯功能封裝在組件內(nèi), 聲明頁面配置數(shù)據(jù)并提供配置表單, 通過對配置表單的數(shù)據(jù)填充, 進行少量頁面編輯就可以完成業(yè)務頁面搭建.

不嵌套的組件

在編輯自由度的選擇上, 選用不嵌套的組件.各組件鋪滿頁面寬度, 在頁面高度方向順序排列.解決組件嵌套帶來的數(shù)據(jù)流問題. 不嵌套的組件如下圖各個紅框框起來的部分所示.

配置表單自動生成

配置表單的作用是生成和約束 JSON 配置數(shù)據(jù), 業(yè)界已有對 JSON 進行描述和自動生成表單的方案 —?JSON Schema. 按照 JSON Schema 規(guī)范對 JSON 數(shù)據(jù)進行描述, 可以動態(tài)渲染出配置表單; 且 JSON Schema 可以對編輯后的數(shù)據(jù)做格式校驗, 避免編輯錯誤. 這比編寫一個表單頁面更加簡單和高效.

圖片來源:?https://github.com/json-editor/json-editor

JSON Schema 的語法并不是很精簡,?云鳳蝶的 Schema 語法?等方案更簡潔, 但是云鳳蝶的語法沒有開源的表單生成庫支持, 在開源實踐上還是 JSON Schema 最佳.

理想活動頁面搭建工具特點

• 采用組件化和頁面模板實現(xiàn)頁面生成效率的提升.

• 采用不嵌套的組件層級簡化數(shù)據(jù)流和樣式布局.

• 采用 JSON Schema 聲明配置數(shù)據(jù), 自動生成配置表單.

• 采用后臺渲染, 使編輯系統(tǒng)與組件前端框架解耦.

• 在遵循編輯系統(tǒng)約定下, 組件可以自由拓展, 前端框架可以自由選擇.

頁面可視化搭建框架 Pipeline

簡介

Pipeline?是一個開源的頁面可視化搭建框架, 主要由筆者在維護. Pipeline 意為流水線, 期望 pipeline 像工廠流水線一樣可以高效地組裝活動頁面.

所謂框架, 是它實現(xiàn)了頁面可視化搭建的基本功能, 解決了頁面可視化搭建的基本難點, 可以讓開發(fā)者快速擁有頁面搭建的能力, 并支持私有部署和二次開發(fā).

項目信息:

• 項目地址:?https://github.com/page-pipepline

• 體驗地址:?https://page-pipepline.github.io/pipeline-editor/dist/#/

• 項目文檔:?https://github.com/page-pipepline/pipeline-document

功能 Demo

可視化編輯

如動圖所示, pipeline 的可視化編輯能力有:

• 可視化修改頁面全局配置, 如修改頁面主題顏色.

• 可視化修改頁面組件內(nèi)容, 如修改組件的圖片和替換組件文本.

• 實時預覽頁面編輯效果, 即刻獲得搭建后的頁面.

• 頁面支持用戶交互.

組件編輯

如動圖所示, pipeline 的組件編輯能力有:

• 動態(tài)增刪頁面組件.

• 可視化的組件拖拽, 拖拽組件庫組件插入到頁面組件列表中.

• 組件可以包含業(yè)務邏輯(網(wǎng)絡請求和用戶交互).

支持的前端框架

Pipeline 實現(xiàn)了編輯器和頁面前端框架的分離, 可以支持不同的前端框架. 所謂支持的前端框架, 就是對某個前端框架按照 pipeline 的約束規(guī)則進行組件編輯方式和工程構建方式的改造, 使得前端框架頁面可以在 pipeline 中可視化搭建.

目前已經(jīng)支持 Vue, React, 和 Omi, 理論上可以支持任意前端框架.

image

框架特點

• 開源頁面可視化搭建框架.

• 自定義頁面可配置字段.

• 組件動態(tài)增減, 組件拖拽.

• 從頁面模板快速生成業(yè)務頁面.

• 模板工程/編輯器/后臺服務解偶.

• 模板工程前端框架無關: 支持 vue 和 react 等.

• 支持自由拓展頁面組件, 不限制組件樣式布局, 接口調(diào)用等.

• 前端工程約束少, 不限制使用其他技術(Redux, SSR, UI庫等).

與云鳳蝶的對比

阿里云鳳蝶?是目前市場上可見中最棒的頁面可視化搭建服務, pipeline 的很多方面和云鳳蝶相似, 做個簡單對比:

云鳳蝶

pipeline

商業(yè)化解決方案, 直接可用	開源系統(tǒng), 基礎的頁面搭建框架, 需要自行部署
生成的頁面, 上傳的圖片等只能托管在阿里, 也限定域名	資源落地和周邊功能需要自行搭建, 但是可以100%掌控所有資源
配置表單功能比較完善	配置表單比較基礎, 需要提升
模板前端框架采用 Nunjucks	前端框架采用沒有約束, 已經(jīng)支持 vue 和 react 等, 業(yè)務遷移成本低
隱藏了模板的構建處理過程, 提供制定的 IDE	采用 webpack 構建, 模板開發(fā)與正常前端項目開發(fā)一致
不支持自定義頁面級別的配置項	支持自定義頁面級別的配置項

總的來說: 云鳳蝶是完整的商業(yè)化頁面可視化搭建系統(tǒng), 適合偏業(yè)務運營的公司; pipeline 是開源的頁面可視化搭建框架, 適合需要自建頁面可視化搭建系統(tǒng)且有技術人員支持的公司.

下一步工作

• 完善技術實現(xiàn)文檔, 使用文檔, 系統(tǒng)部署文檔和模板開發(fā)文檔.

• 提供對更多前端框架的支持.

• 提供更加豐富的可視化交互方式.

總結

本文討論了活動頁面開發(fā)的痛點, 總結出頁可視化搭建工具的7個技術要點和4個技術難點, 并整理出理想的運營頁面可視化搭建工具, 最后介紹頁面可視化搭建框架 pipeline.

行文倉促, 對頁面可視化搭建話題或開源項目 pipeline 感興趣, 歡迎討論.

References

• pipeline:https://github.com/page-pipepline

• 頁面可視化搭建工具前生今世:https://github.com/CntChen/cntchen.github.io/issues?/15

• Vue2.0學習筆記：組件數(shù)據(jù)傳遞:https://www.w3cplus.com/vue/component-data-and-props-part1.html

• 阿里云鳳蝶:https://i.yunfengdie.com/

關于本文
作者：@陳韓杰
原文：https://github.com/CntChen/cntchen.github.io/issues/17

-?end?-

用心分享?一起成長?做有溫度的攻城獅

每天記得對自己說：你是最棒的！

往期推薦

淺談easy-mock 最好的備胎沒有之一

近一萬字的ES6語法知識點補充

年后小試水?前端面試題匯總(主要為 Vue)

如何擼一份高薪架構級的工程師簡歷

深入理解JS 執(zhí)行上下文與執(zhí)行棧～

JavaScript的這個難點，這些年毀了多少程序員？

優(yōu)秀的前端如何編寫高質(zhì)量的函數(shù) -- 函數(shù)底層篇

什么? CSS 陰影竟然還有這種騷操作 ？

每一個“好看”，都是對我們最大的肯定！

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的c++可视化开发_页面可视化配置搭建工具技术要点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。