pmd-mobile-component

目录结构

| - | -- build （各种配置文件） | | --- | ------------------------------- |docs （文档存放目录） | - | -- example （示例工程存放目录） | | --- | ------------------------------------- |module （模块相关存放目录）

• ​ |-- tip-merhcant （游戏内H5功能模块）
• ​ |-- tip-match （赛事功能模块） | - ​ | -- tip-act （活动常用功能模块） | | --- | ------------------------------------- |ui （前端组件相关存放目录）
• ​ |-- sass （基础样式）
• ​ |-- tip-merhcant （游戏内H5组件）
• ​ |-- tip-match （赛事组件） | - ​ | -- tip-act （活动常用组件） | | --- | --------------------------------- |html （重构静态文件相关存放目录）
• |-- tool （脚手架等工具文件）

运行说明

安装依赖

npm install

运行和构建示例工程

运行示例工程 npm run demo

构建示例工程 npm run build:demo

运行和构建文档

运行vuepress文档 npm run docs:dev

构建vuepress文档 npm run docs:build

配置文件

build/auto-regist.js 搜索ui下的组件，全局注册组件，这样示例工程中不用继续引入

build/tip-css-loader.js 处理vue文件的loader，用于处理vue需要加载的scss组件，通过替换@TIP_STYLE_NAME实现

build/webpack.base.js 基础webpack配置文件，其他webpack配置文件从这个配置继承

/build/webpack.demo.js 示例工程配置文件

如何添加一个业务UI组件

0. 新建组件目录

直接跑下面的命令就可以了

npm run compcli init <name>
// 例如 npm run compcli init tip-comp-dialog-input-addr

1. 开发组件

1. 在ui目录下新建一个目录，开发组件代码
2. npm run demo 运行示例工程
3. 执行下面的流水线，将构建和发布示例工程 http://dev.oa.com/console/pipeline/tip-component/p-a6dbb686dccd40e4b682014c9f91e522/preview

2. 编写文档

1. 在docs/ui新建一个同组件名称的MD文件，示例代码直接加上demo-block就可以显示

    <demo-block component-name="你的组件名" />

2. npm run docs:dev 运行文档工程

3. 执行下面的流水线，将构建和发布示例工程 http://dev.oa.com/console/pipeline/tip-component/p-d71f8a539fa84d01a26ad0b14be96d76/preview

注意！！！：组件目录、组件名称、MD文档名称需要是一样的，demo工程和文档中的示例将自动完成，不需要编写