新建组件

Min 提供内置的 组件package 脚手架模板，帮助用户快速创建一个新的 组件package 和 组件示例页面

  1. $ min new [name]

新建步骤

  • 进入 Min组件库项目 的根目录
  1. $ cd ~/your_weapp_project/
  • 输入指令和新的组件名，toast 是新的组件名称
  1. $ min new toast

  • 此时进入新建组件的命令行交互式问答，开发者请按照命令行上的交互式问题来完成具体操作

    • 第一步：请选择新建类型，此时请选择 新建组件 
  1. - 新建组件
  2. - 新建页面
  • 第二步：请设置新组件的英文名称
  1. # 当指令 `min new` 后面没有带上组件名称，Min 会提示输入组件名称
  2. toast  # toast 为演示名称，开发者请输入实际的组件英文名称
  • 第三步：请设置新组件的中文标题
  1. 提示 # 提示 为演示标题，开发者请输入实际的组件中文标题

  • 完成上个步骤，Min 工具将进入自动化生成构建阶段

    • 创建并生成 组件package 到 ~/your_weapp_project/packages/wxc-toast 目录下
    • 创建并生成组件示例页面 到 ~/your_weapp_project/pages/toast 目录下
    • 自动编译 src 源码到 dist 目录下
    • 提示新建完成
  • 此时新的页面已创建完成：请在 "微信开发者工具" 中切换到新的组件示例页面路径预览

目录结构

以下是 Min 设计的目录结构，用户可以按照以上流程新建一个 组件，也可以通过 Min组件库示例 快速入门

  2. ├── dist                       微信开发者工具指定的目录（该目录由 Min 的 dev 指令自动编译生成，请不要直接修改该目录下的文件）
  3. |   ├── packages
  4. |   |   ├── wxc-toast
  5. |   |   |   ├── dist
  6. |   |   |   |   ├── index.js
  7. |   |   |   |   ├── index.wxml
  8. |   |   |   |   ├── index.wxss
  9. |   |   |   |   └── index.json
  10. |   └── pages
  11. |   |   ├── toast
  12. |   |   |   ├── demos
  13. |   |   |   |   ├── demo-default.js
  14. |   |   |   |   ├── demo-default.wxml
  15. |   |   |   |   ├── demo-default.wxss
  16. |   |   |   |   └── demo-default.json
  17. |   |   |   ├── index.js
  18. |   |   |   ├── index.wxml
  19. |   |   |   ├── index.wxss
  20. |   |   |   └── index.json
  21. ├── src
  22. |   ├── packages               Min 组件库目录（属于管理各个 组件package 的主目录）
  23. |   |   ├── wxc-toast              toast 组件的 package 目录
  24. |   |   |   ├── src                    组件源码编写目录
  25. |   |   |   |   ├── index.wxc              index 组件（index 文件默认为组件的入口文件）
  26. |   |   |   └── package.json           组件的 package 配置
  27. |   ├── pages                  Min 页面目录（属于完整页面）
  28. |   |   ├── toast                  toast 组件示例页面
  29. |   |   |   ├── demos                  组件示例编写目录（该目录为组件示例代码，每个示例代表一个组件的使用场景介绍）
  30. |   |   |   |   └── demo-default.wxc       组件示例代码
  31. |   |   |   └── index.wxp              index 页面（该页面用于承载组件的 Demo 示例、API 文档 和 changelog 日志）