CDP、DXP页面组件库

该组件库为CDP、DXP提供通用的页面组件，即一个组件为一个业务页面。可供基于nuxt的第三方项目(宿主环境)内嵌使用。

能够畅快使用该组件库前提条件：

• 项目基于nuxt构建
• 页面路由由nuxt自动生成，页面存放于pages目录下
• 需要安装该组件库目package.json下peerDependencies对象指定的依赖并做好引用，具体引用方式可参考/examples/plugins/element-ui.js文件

一、第三方项目使用方法

安装

yarn add dxp-cdp-data-ui --dev

使用

1. 引入组件库

import Vue from 'vue'
import DxpCdpDataUi from 'dxp-cdp-data-ui/packages/index'
Vue.use(DxpCdpDataUi)

2. 页面配置

在项目pages目录下配置需要使用组件的页面，如需要使用某一列表页面可在pages下添加list.vue：

<template>
  <page-demo-list></page-demo-list>
</template>

<script>
  export default {}
</script>

快捷方法：若嫌一个一个手动添加页面麻烦，可以找到dxp-cdp-data-ui库源文件，将examples目录下所需的页面模块(xxx-module)复制到项目的pages目录下

3. 提供页面列表

// TODO 项目开发中再添加

二、页面组件库开发指南

目录结构

dxp-cdp-data-ui
├─nuxt.config.js
├─package.json
├─README.md
├─yarn-error.log
├─yarn.lock
├─packages                                         # 页面组件主目录
|    ├─index.js                                    # 页面组件主出口，导出所有页面组件
|    ├─utils                                       # 公共方法
|    ├─page-components                             # 页面组件目录
|    |        ├─index.js                           # 导出页面模块
|    |        ├─demo2-module                       # 页面模块
|    |        |      └page-demo2-list.vue          # 具体页面
|    |        ├─demo-module
|    |        |      ├─page-demo-detail.vue
|    |        |      └page-demo-list.vue
|    ├─const                                       # 常量
|    ├─components                                  # 公共组件
|    |     └demo.vue
|    ├─assets                                      # 静态资源
|    |   ├─img                                     # 图片
|    |   |  └deepexi.jpg
|    ├─api                                         # api模块
├─lib                                              # 打包npm模块生成的文件
├─examples                                         # 示例页面
|    ├─store                                       # vuex相关（禁用）
|    ├─static
|    ├─plugins                                     # 示例所需插件
|    |    ├─dxp-cdp-data-ui.js                     # 引入dxp-cdp-data-ui
|    |    └element-ui.js                           # 引入element
|    ├─pages                                       # 示例页面
|    |   ├─index.vue     
|    |   ├─demo-module                             # 示例页面模块
|    |   |      ├─detail.vue
|    |   |      └list.vue
└────└─components                                  # 示例所需组件（禁用：示例页面禁用自定义组件）

开发页面组件步骤

1. 创建页面模块：在./packages/page-components目录下创建页面模块文件夹（命名规范：xxx-module）
2. 导入页面模块： 在./packages/page-components/index.js文件中导入上述创建的文件夹，如：

   const modulesContext = [
     require.context('./demo-module', false, /\.vue$/),
     require.context('./demo2-module', false, /\.vue$/),
   ]

3. 创建页面：在第1步创建的文件夹下创建页面vue文件（命名规范: page-xxx.vue）
4. 编写页面内容：按照目录结构及需求编写页面逻辑
5. 创建示例文件：在./examples/pages下创建对应的页面模块及页面
6. 运行调试：执行yarn dev运行项目，默认打开localhost:3000，此时显示的页面为示例页面的相关页面，可进行相应页面和组件的调试
7. 发布npm包：在package.json中修改版本号后执行npm publish发布npm包（npm账号请询问仓库所有者）

注意事项

1. 项目中部分组件为dxp部门基于element或公司组件二次封装的，如：el-button-drawer el-data-table等，若遇到这类以@dxp-dc开头的组件库，具体使用方法可访问http://test-obs-dx.deepexi.com/dxp-docs-site/dx-pc-ui/index.html 查看