# 组件库开发指南 * * * # 背景介绍 为了能够减少维护代价，降低复杂业务逻辑开发门槛，我们新增加了各种功能性组件。让开发像搭积木，不需要再去深入理解业务细节，直接拼装即可使用。 ## 说明 > 组件库分为三个`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`\=> 暂无