物料模板

使用 CLI 初始化物料项目时，可以选择一些内置的模板，同样也可以使用/开发自定义模板。

已支持模板

目前，基于 Next CLI 可以使用的物料模板如下：

模板 npm 包名	是否内置	说明	备注
@nextd/next-material-template	是	中后台物料模板
@nextd/viser-material-template	是	可视化物料模板
@nextd/mini-material-template	是	小程序物料模板	不支持业务组件
@nextd/maleon-chart-template	否	自定义图表模板	仅支持业务组件开发

对于没有内置的模板，可以通过 next init material @nextd/maleon-chart-template 的方式使用自定义模板。

自定义模板

当以上这些物料模板不满足开发需求时，可以开发自定义物料模板。通常 不推荐自定义模板，因为这会带来非常严重的碎片化问题。如果有此需求的话一定要跟模板维护团队沟通，确认自定义模板的必要性。

同时，我们希望模板能统一维护与迭代，因此自定义模板必须遵循必要的开发规范。

目录结构

一套物料模板包含组件、区块、页面和项目四种不同类型的物料，因此物料模板的目录结构应该按以下约定组织：

├── README.md       // 模板文档
├── package.json
└── template        // 模板目录
    ├── block       // 区块模板
    ├── component   // 组件模板
    ├── page        // 页面模板
    └── scaffold    // 项目模板

模板配置

物料模板的 package.json 里包含一个新的字段 —— materialConfig，定义了该模板的以下属性：

• type: 字符串，指定当前物料模板的前端框架类型，如：react、vue、angular

模板文件

物料模板 template/ 目录下包含 block、component，page 和 scaffold 子目录，它们即物料的模板文件。

CLI 获取到物料模板后，会根据这四个文件生成对应的区块、组件、页面和项目代码。

模板语法

在物料模板中，我们使用 ejs 语法将用户输入注入到模板中，再渲染生成初始代码。

根据用户输入，我们提供了以下变量供物料模板开发者使用：

• title：页面标题
• name：短横线分割的物料名称
• className：首字母大写的驼峰式物料名称
• npmName：有效的 npm 包名称
• description：物料描述
• version：物料版本
• category：物料分类
• registry：npm 镜像
• materialConfig：物料模板配置

命名约定

在 block、component、page 和 scaffold 目录下，是没有 package.json 文件的，但有一个 _package.json 文件。这个 _package.json 即物料的 package.json 模板，在文件内部同样使用以上 ejs 语法。使用下划线前缀的主要目的是区分 npm 默认的 package.json 文件，以免安装时被 npm 解析。

模板中其他以下划线 _ 开头的文件都是如此。例如 _gitignore 会在物料被使用时解析为 .gitignore 文件，在模板中并不处理。

使用模板

物料模板开发完成后，需要发布到 npm 才可使用。发布之后，在执行 next init 命令时通过参数指定物料模板即可。

# 通过 npm 包
next init material custom-material-template

# 通过相对路径
next init material ../maleon-chart-template