Making A Page Builder: init () (Italiano)

(21 dicembre 2020)

I page builder sono strumenti molto potenti per costruire pagine web senza codice. Possiamo costruire pagine web con blocchi speciali dal page builder. Come programmatore junior, pagare soldi per un altro generatore di pagine non è utile. Pertanto, creerò il mio page builder in questa serie di articoli. Andiamo!

Foto di Christopher Gower su Unsplash

Passaggio 1: scegli le tue dipendenze!

Creare un page builder da zero è unidea terribile. Più tempo, più lacrime e più dolore al collo … Questo scenario è più terribile di un film dellorrore.

GrapesJS e VueJS sono framework più potenti e abbastanza per il mio page builder .

Passaggio 2: Download!

In questo passaggio, ho bisogno di scaricare questi framework.

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

o con npm

  • npm i grapesjs

VueJS

Per la versione di sviluppo

 

Passaggio 3: prima configurazione!

In questo passaggio, inizializzeremo il nostro progetto con 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: [] },
});

Continuerò questo articolo ……