Fazendo um construtor de páginas: init ()

(21 de dezembro de 2020)

Construtores de páginas são ferramentas muito poderosas construir páginas da web sem código. Podemos construir páginas da web com blocos especiais do construtor de páginas. Como um programador júnior, pagar dinheiro para outro criador de páginas não é útil. Portanto, farei meu próprio construtor de páginas nesta série de artigos. Vamos lá!

Foto de Christopher Gower em Unsplash

Etapa 1: Escolha suas dependências!

Fazer um construtor de páginas do zero é uma ideia muito terrível. Mais tempo, mais lágrimas e mais dor no pescoço … Este cenário é mais terrível do que um filme de terror.

GrapesJS e VueJS são estruturas mais poderosas e suficientes para o meu construtor de página .

Etapa 2: Baixando!

Nesta etapa, preciso baixar esses frameworks.

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

ou com npm

  • npm i grapesjs

VueJS

Para versão de desenvolvimento

 

Etapa 3: primeira configuração!

Nesta etapa, inicializaremos nosso projeto com 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: [] },
});

Vou continuar este artigo ……