# 組件庫開發指南 * * * # 背景介紹 為了能夠減少維護代價，降低復雜業務邏輯開發門檻，我們新增加了各種功能性組件。讓開發像搭積木，不需要再去深入理解業務細節，直接拼裝即可使用。 ## 說明 > 組件庫分為三個`pc-ui組件庫`、`移動ui組件庫`、`業務組件庫`、`欄目組件庫`。 * pc-ui組件庫：只包含單純的pc-ui顯示類組件，通用性較強。 * 移動ui組件庫：只包含單純的m-ui顯示類組件，通用性較強。 * 業務組件庫：對某個業務塊高度集成，使用者只需要關系入口跟出口即可，無需關心內部業務處理。 * 欄目組件庫：門戶專用組件，自帶請求邏輯，內部包含業務組件和ui組件，并且要集成皮膚控制。 ## 開發前準備 > 正確配置`Node.js`v6.x 或以上版本（推薦先安裝nvm），svn最好添加dos命令版 ## 命令合集 > 組件打包工程 * `npm run create`新建組件，可選擇構建哪個組件庫的初始化工程，并且會生成初始化md文檔， * `npm run dist`交互式打包命令合集，最后提交時候可用此命令交互式發布組件庫，最后一個選項為全組件庫更新。 注：以下命令已集成到上面兩個命令中 * `npm run clean`清除lib文件夾 * `npm run build:pkg`分別打包packages下子項目，影響分布引用用戶 * `npm run build:index`分別打包總項目，影響全體引用用戶（不推薦使用） * `npm run build:theme`編譯公共樣式（業務組件庫暫時不用） * `npm run build:utils`編譯公共js為es5 * `npm run build:cpAssets`拷貝src下assets * `npm run republish`單純發布工程，不編譯直接發布 > 門戶打包 * `npm build:frame`框架編譯（只用于開發） * `npm build:layout`門戶編譯（只用于開發） * `npm dist:layout`正式打包到商城 * `npm dev:layout`運行layout > API文檔工程 * `npm run start`本地啟動API文檔 * `npm run build`編譯API文檔 * `npm run dll`編譯vendor * `npm run lint`eslint代碼整理 * `npm run unit`運行單元測試 ## 組件庫開發流程 ### 新建組件 運行`npm run create`按照交互命令創建標準初始組件。 組件名的命名規則在`packages/config.js`下配置。比如業務組件庫必須為`cap4-`開頭, 只有`cap4-`開頭的文件夾才會被識別為組件、否則會被忽略。 注：在創建過程中會自動添加識別頭，無需再次輸入。比如創建組件`cap4-test`組件，只需輸入`test`即可。 ~~~cmd npm run create 組件名 test ------創建模板 packages\cap4-test\index.js packages\cap4-test\src\cap4-test.vue packages\cap4-test\src\css\cap4-test.css ~~~ 創建模板后進入packages文件夾下的模板文件夾中開發。 注：選擇不同的組件，生成的組件位置和打包后位置不同 * pc-ui組件庫：`packages_pc_ui`打包=>`lib_pc_ui` * 移動ui組件庫：`packages_m_ui`打包=>`lib_m_ui` * 業務組件庫：`packages`打包=>`lib` * 欄目組件庫：`packages_columns`打包=>`lib_columns` ### 開發組件與測試 創建組件后，在`examples\docs`下創建組件的同名文檔，并且在nav.config.json中填入路由 > 路由設置：desc 路由顯示名稱，name路由名稱，path為路由地址 ~~~cmd { "desc": "indexVUE 測試頁面", "name": "index", "path": "/index" } ~~~ > 如果不想用md格式或者只是方便測試自己的組件，則在pages下創建自己的組件開發用vue,并且設置如下路由，增加了類型type，指向到pages ~~~cmd { "desc": "indexVUE 測試頁面", "type":"pages", "name": "index", "path": "/index" }, ~~~ ### 編譯組件 運行`npm run dest`按照交互命令編譯組件庫。 > 交互式邏輯如下 ~~~cmd npm run dist 是否需要全工程構建？ 是：全部工程構建，重新刷新整個組件的列表文件。 否：進入局部編譯狀態。 版本說明：如果有svn提交會發布到svn日志 是否重復上次工程構建？ 是：讀取本地緩存文件，執行上一次局部構建 否：進入局部構建選擇頁面 選擇需要構建的包？[a]全選[space]選擇/取消 （）cap4-pkg1 （）cap4-pkg2 （）cap4-pkg3 是否發布到資源庫？ 是：提交到npm內部資源庫。 否： ~~~ 局部構建是為了方便開發的時候快速編譯，如果要發布到資源庫里最好更新svn后再執行全編譯。 ### 業務組件組 用`create`創建的是標準業務組件，如果需要創建非標準的業務組件組，參照`cap4-statistics-pc-ui`組件。 業務組件組：如果幾個組件是強關聯的，要引入都一起引入，才推薦使用業務組件組。其他情況都使用標準業務組件模板。 業務組件組index結構：對外暴露`install`方法，此方法循環注入多個組件 ~~~ import Cap4StatisticsMuiSelectGroup from './src/eap-phone-select-group.vue'; import Cap4StatisticsMuiPieTable from './src/eap-echart-table/eap-echart-table-pie.vue'; import Cap4StatisticsMuiLine from './src/eap-echart-table/eap-echart-table-line.vue'; import Cap4StatisticsMuiLineFilter from './src/eap-echart-table/eap-echart-table-line-filter.vue'; import Cap4StatisticsMuiLineHeader from './src/eap-echart-table/eap-echart-table-line-header.vue'; import Cap4StatisticsMuiLineTabs from './src/eap-echart-table/eap-echart-table-line-tabs.vue'; const components = [ Cap4StatisticsMuiSelectGroup, Cap4StatisticsMuiPieTable, Cap4StatisticsMuiLine, Cap4StatisticsMuiLineFilter, Cap4StatisticsMuiLineHeader, Cap4StatisticsMuiLineTabs ]; for(let i=0;i<components.length;i++){ let component = components[i]; component.install = function (Vue) { Vue.component(component.name, component); }; } const install = function(Vue) { if (install.installed) return; components.map(component => component.install(Vue)) } export default { install, Cap4StatisticsMuiSelectGroup, Cap4StatisticsMuiPieTable, Cap4StatisticsMuiLine, Cap4StatisticsMuiLineFilter, Cap4StatisticsMuiLineHeader, Cap4StatisticsMuiLineTabs } ~~~ ### 組件文檔 使用`npm run create`命令創建的組件會自動生成文檔，文檔放置在各自的文件夾中。新建的文檔不會被添加到導航欄上，如果文檔已經完事，手動添加到各自的config文件下 * pc-ui組件庫：`examples\docs_pc_ui`\=> 暫無 * 移動ui組件庫：`examples\docs_m_ui`\=> 暫無 * 業務組件庫：`examples\docs`\=> nav.config.json * 欄目組件庫：`examples\docs_column`\=> 暫無