Creación de un generador de páginas: init ()

(21 de diciembre de 2020)

Los creadores de páginas son herramientas muy poderosas para construcción de páginas web sin código. Podemos construir páginas web con bloques especiales del generador de páginas. Como programador junior, pagar dinero por otro creador de páginas no es útil. Por lo tanto, crearé mi propio generador de páginas en esta serie de artículos. ¡Vamos!

Foto de Christopher Gower en Unsplash

Paso 1: ¡Elija sus dependencias!

Hacer un constructor de páginas desde cero es una idea terrible. Más tiempo, más lágrimas y más dolor de cuello … Este escenario es más terrible que una película de terror.

GrapesJS y VueJS son marcos más potentes y suficientes para mi creador de páginas .

Paso 2: ¡Descarga!

En este paso, necesito descargar estos marcos.

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

Para la versión de desarrollo

 

Paso 3: ¡Primera configuración!

En este paso, inicializaremos nuestro proyecto 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: [] },
});

Continuaré este artículo ……