# 组件库开发指南

# 背景介绍

为了能够减少维护代价，降低复杂业务逻辑开发门槛，我们新增加了各种功能性组件。让开发像搭积木，不需要再去深入理解业务细节，直接拼装即可使用。

# 说明

组件库分为三个pc-ui组件库、移动ui组件库、业务组件库、栏目组件库。

pc-ui组件库：只包含单纯的pc-ui显示类组件，通用性较强。
移动ui组件库：只包含单纯的m-ui显示类组件，通用性较强。
业务组件库：对某个业务块高度集成，使用者只需要关系入口跟出口即可，无需关心内部业务处理。
栏目组件库：门户专用组件，自带请求逻辑，内部包含业务组件和ui组件，并且要集成皮肤控制。

# 开发前准备

正确配置Node.jsv6.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 linteslint代码整理
npm run unit运行单元测试

# 组件库开发流程

# 新建组件

运行npm run create按照交互命令创建标准初始组件。组件名的命名规则在packages/config.js下配置。比如业务组件库必须为cap4-开头, 只有cap4-开头的文件夹才会被识别为组件、否则会被忽略。

注：在创建过程中会自动添加识别头，无需再次输入。比如创建组件cap4-test组件，只需输入test即可。

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为路由地址

{
          "desc": "indexVUE 测试页面",
          "name": "index",
          "path": "/index"
        }

如果不想用md格式或者只是方便测试自己的组件，则在pages下创建自己的组件开发用vue,并且设置如下路由，增加了类型type，指向到pages

{
          "desc": "indexVUE 测试页面",
          "type":"pages",
          "name": "index",
          "path": "/index"
        },

# 编译组件

运行npm run dest按照交互命令编译组件库。

交互式逻辑如下

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=> 暂无
编撰人：yinyanting

快速跳转

组件库开发指南
背景介绍

← 4.5.5 版本记录 3.6.2 开发文档规范 →