pmd-mobile-component

0.1.343 • Public • Published

目录结构

| - | -- 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工程和文档中的示例将自动完成,不需要编写

Readme

Keywords

none

Package Sidebar

Install

npm i pmd-mobile-component

Weekly Downloads

13

Version

0.1.343

License

MIT

Unpacked Size

6.1 MB

Total Files

1030

Last publish

Collaborators

  • lidashuang
  • yanggwcn
  • junshao