Att skapa en sidbyggare: init ()

(21 dec 2020)

Sidbyggare är mycket kraftfulla verktyg för bygga webbsidor utan kod. Vi kan bygga webbsidor med specialblock från sidbyggaren. Som junior-programmerare är det inte användbart att betala pengar för andra sidbyggare. Därför kommer jag att skapa min egen sidbyggare i den här artikelserien. Låt oss gå!

Foto av Christopher Gower Unsplash

Steg 1: Välj dina beroenden!

Att skapa en sidbyggare från noll är en mycket hemsk idé. Mer tid, mer tårar och mer nacksmärta … Detta scenario är mer hemskt än en skräckfilm.

DruvorJS och VueJS är kraftfullare ramar och mycket nog för min sidbyggare .

Steg 2: Nedladdning!

I det här steget måste jag ladda ner dessa ramar.

GrapesJS

CDN

  • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js

  • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css

eller med npm

  • npm i grapesjs

VueJS

För utvecklingsversion

 

Steg 3: Första installationen!

I det här steget initialiserar vi vårt projekt med GrapesJS.

index.html

app.js

const editor = grapesjs.init({
// Indicate where to init the editor. You can also pass an HTMLElement
container: "#gjs",
// Get the content for the canvas directly from the element
// As an alternative we could use: `components: "

Hello World Component!

"`,
fromElement: true,
// Size of the editor
height: "300px",
width: "auto",
// Disable the storage manager for the moment
storageManager: false,
// Avoid any default panel
panels: { defaults: [] },
});

Jag fortsätter den här artikeln ……