Prodotype在Silex网站构建器中用作组件创建工具。使用它来创建组件和UI，以将其编辑为HTML模板和YAML文件。
链接
- 网站
- Github仓库
- NPM软件包
- 文档
特征
- 从1个模板文件构建组件和每个组件的1个定义文件
- 生成一个UI来编辑每个组件，该组件创建一个数据对象
- 渲染一个给定数据对象的组件
- 管理组件的依赖项
安装
添加到您的项目并构建pub/ Prodotype .js
$ npm install
$ npm run build在您的项目中使用
在您的HTML页面中 - 例如，请参阅此演示页面
Prodotype.js"></script>
<div id="stage"></div>
<div id="ui"></div>">
< script type =" text/javascript " src =" ./ejs.min.js " > </ script > < script type =" text/javascript " src =" ./ Prodotype .js " > </ script > < div id =" stage " > </ div > < div id =" ui " > </ div >
在您的JS文件中 - 例如，有关完整 /真实世界的示例，请参见此演示脚本。
Prodotype templates are located
const templateFolder = './sample'
// the main Prodotype object
const Prodotype = new Prodotype (ui, templateFolder);
Prodotype .ready(function(err) {
// create a slide show in the stage div
const templateName = 'unslider';
Prodotype .decorate(templateName).then(html => stage.innerHTML = html);
// display tool boxes to edit the component
Prodotype .edit(data, [{templateName:templateName}], templateName, {
onChange: function(newData, html) {
stage.innerHTML = html;
}
});
});
">
// the div where you want your components to be rendered const stage = document . querySelector ( '#stage' ) ; // the div where we want the UI to edit the components const ui = document . querySelector ( '#ui' ) ; // where Prodotype templates are located const templateFolder = './sample' // the main Prodotype object const Prodotype = new Prodotype ( ui , templateFolder ) ; Prodotype . ready ( function ( err ) { // create a slide show in the stage div const templateName = 'unslider' ; Prodotype . decorate ( templateName ) . then ( html => stage . innerHTML = html ) ; // display tool boxes to edit the component Prodotype . edit ( data , [ { templateName : templateName } ] , templateName , { onChange : function ( newData , html ) { stage . innerHTML = html ; } } ) ; } ) ;
使用npm start运行它，您应该能够像这样编辑组件：
创建自己的模板
使用.yaml文件和.ejs文件创建一个文件夹 - 请参阅sample/文件夹以查看模板的示例。
然后使用此命令行构建模板，该命令行将在目标文件pub/sample/中生成一个components.json 。
$ npm run build:templates所有类型的编辑器
发展
生产（使用http-server为pub/ ）：
$ npm start开发（服务，观看，建造和现场重新加载）：
$ npm run watch
$ npm run reload创建一个新版本
$ npm version patch
$ git push origin master --follow-tags
$ npm publish下载源码
通过命令行克隆项目:
git clone https://github.com/silexlabs/Prodotype.git