Prodotype

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