Making A Page Builder: init ()

(21. des. 2020)

Sidebygger er veldig kraftige verktøy for bygge nettsider uten kode. Vi kan bygge websider med spesielle blokker fra sidebyggeren. Som juniorprogrammerer er det ikke nyttig å betale penger for annen sidebygger. Derfor vil jeg lage min egen sidebygger i denne artikkelserien. La oss dra!

Foto av Christopher Gower Unsplash

Trinn 1: Velg dine avhengigheter!

Å lage en sidebygger fra null er en veldig forferdelig idé. Mer tid, mer tårer og mer nakkesmerter … Dette scenariet er forferdeligere enn en skrekkfilm.

DruerJS og VueJS er kraftigere rammer og veldig nok for sidebyggeren min .

Trinn 2: Nedlasting!

I dette trinnet må jeg laste ned disse rammene.

GrapesJS

CDNs

  • 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

For utviklingsversjon

 

Trinn 3: Første oppsett!

I dette trinnet vil vi initialisere prosjektet vårt 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: [] },
});

Jeg vil fortsette denne artikkelen ……