Oldalkészítő készítése: init ()

(2020. december 21.)

Az oldalépítők nagyon hatékony eszközök a weboldalak készítése kód nélkül. Weboldalakat készíthetünk speciális blokkokkal az oldal készítőtől. Junior programozóként nem hasznos pénzt fizetni más oldalkészítőkért. Ezért ebben a cikksorozatban elkészítem saját oldalam készítőjét. Menjünk!

Fotó: Christopher Gower a Sablon eltávolítása

1. lépés: Válassza ki a függőségeit!

Az oldal készítőjének nulláról való elkészítése nagyon szörnyű ötlet. Több idő, több könny és több nyaki fájdalom … Ez a forgatókönyv szörnyűbb, mint egy horrorfilm.

A GrapesJS és a VueJS erőteljesebb keretrendszerek, és nagyon elegendőek az oldalkészítőm számára .

2. lépés: Letöltés!

Ebben a lépésben le kell töltenem ezeket a keretrendszereket.

GrapesJS

CDN-ek

  • 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

vagy npm-el

  • npm i grapesjs

VueJS

Fejlesztői verzióhoz

 

3. lépés: Első beállítás!

Ebben a lépésben a GrapesJS segítségével inicializáljuk a projektünket.

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: [] },
});

Folytatom ezt a cikket ……