## 组件库说明 本节将介绍如何使用本项目快速开发组件库。 ### 基本使用 #### 第一步 在项目目录下的终端输入命令npm run new ，创建相关文件 ```bash npm run new input,输入框 form,表单 npm run new input form ``` 注意：1.使用英文逗号分隔，中文名可省略，如果被创建的文件已存在，则会覆盖原有文件 2.使用自动化脚本命令只能创建固定层级的组件，如有特别需求，例如UI规范页面等，请自行创建md文档及路由 #### 第二步 继续输入命令npm run build_entry，重写入口文件src/index.js 注意：重写src/index.js前，需确保对应的组件文件具有name（一般在第一步自动写入），否则引用组件失败 #### 第三步 在src/components/模块名/组件名.vue中写入组件代码，在examples/docs/模块名/组件名.md中写入组件使用样例及说明文档 如果md文档中style含有独立样式，需在examples/demo-styles/模块名/组件名.less中复制粘贴一遍才生效，如无可以省略这一步 #### 第四步 输入命令npm run serve启动项目，检查是否有报错，无报错则输入命令npm run build_all打包组件库，生成lib及dist文件夹。确认无误后，修改package.json文件中的版本号，然后执行npm发布，具体步骤及注意事项请查看项目README.md文件 注意：1.已有注册npm账号的可修改版本号后直接执行npm publish命令 2.发布上npm后，cnpm需要通过访问https://npm.taobao.org/sync/dxx-ui进行手动同步后才能使用组件库 #### 第五步 最后登录npm官网https://www.npmjs.com/package/dxx-ui确认版号更改，并通知群组成员组件库更新 ### 目录结构 ```shell | dxx-ui | – build 自动化脚本与webpack打包配置 | – bin 自动化脚本 | – md-loader md文档编译设置 | – ****.js webpack打包配置 | – config webpack打包配置 | – src 项目源码文件目录 | – components 自定义组件库 | – static 组件库全局样式文件 | – index.js 组件库入口 | – examples 说明文档项目 | – assets 公共样式 | – components 项目公共组件 | – demo-styles 组件库文档样式 | – docs 组件库文档 | – navList.json 组件库动态路由 | – dist 说明文档项目编译发布文件目录 | – lib 组件库编译发布文件目录 | – node_modules nodejs第三方插件 | – test 单元测试目录(TO DO) | – components.json 组件入口，用于自动化脚本执行 | – .eslintrc.js eslint配置文件 | – package.json nodejs第三方插件依赖配置 | – ****.md 文档类 ``` ### 命名规范 1.组件命名请使用驼峰格式，使用脚本创建组件时将自动加上dxx前缀 2.组件请放置于分类目录下 ```shell | – src 项目源码文件目录 | – components 自定义组件库 | – module-name 模块名 | – component-name 组件名 | – examples 说明文档项目 | – docs 组件库文档 | – module-name 模块名 | – component-name 组件名 | – demo-styles 组件库文档样式 | – module-name 模块名 | – component-name 组件名 ``` ### 说明文档编写规范 需至少具有组件名称、组件描述、基本用例、使用说明模块 使用说明分为属性、插槽、方法、事件，使用表格展示，至少具备参数、说明、类型、可选值、默认值字段