grapesjs教程（一）- Hello World

介绍

grapesjs是一个开源的网页设计器，你可以理解为在线低配版Dreamweaver，和Dreamweaver不同的是，grapesjs可以灵活的进行二次开发，实际上grapesjs只是构建了设计器最基础的部分，没有二次开发grapesjs也没有意义，如果你恰好有以下需求，那么grapesjs将非常适合你

• 页面在线设计编辑，并且能自定义组件
• 可以导出源码
• 提供属性配置
• 灵活的二次开发机制

使用

grapesjs使用方法很简单，如果是html页面，可以直接通过导入js和css即可

    
    
    
    
    




    Hello Wold

运行效果

和官网相比，我们发现会少了很多组件

前面提到过，grapesjs只是提供网页设计的基础框架，并不包含具体的组件，这么设计也是合理的，因为同样的页面使用不同的框架生成的代码就不一样，这个是无法统一的，所以交给开发者自行实现是比较合适的。那如何做到和官网一样的效果呢，这里需要借助grapesjs的插件grapesjs-preset-webpage，修改代码如下：

    
    
    
    
    
    
    
    
    




    Hello Wold

现在和官网就保持一样

开发

只需以下命令就能运行grapesijs源码

git clone https://github.com/artf/grapesjs.git
cd grapesjs
npm i
npm start

命令执行后会自动打开一个测试页面