Sivunrakentajan tekeminen: init ()

(21. joulukuuta 2020)

Sivunrakentajat ovat erittäin tehokkaita työkaluja verkkosivujen rakentaminen ilman koodia. Voimme rakentaa verkkosivuja erityisillä lohkoilla sivunrakentajasta. Nuorempana ohjelmoijana ei ole hyödyllistä maksaa rahaa muille sivunrakentajille. Siksi teen oman sivunrakentajan tässä artikkelisarjassa. Lähdetään!

Kuva: Christopher Gower päällä Poista plash

Vaihe 1: Valitse riippuvuutesi!

Sivunrakentajan tekeminen nollasta on erittäin kauhea idea. Enemmän aikaa, enemmän kyyneleitä ja enemmän niskakipuja … Tämä skenaario on kamalampi kuin kauhuelokuva.

ViinirypäleetJS ja VueJS ovat tehokkaampia kehyksiä ja riittävästi sivunrakentajalle .

Vaihe 2: Ladataan!

Tässä vaiheessa minun on ladattava nämä kehykset.

GrapesJS

CDN-tiedostot

  • 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

tai npm: llä

  • npm i grapesjs

VueJS

Kehitysversiolle

 

Vaihe 3: Ensimmäinen asennus!

Tässä vaiheessa aloitamme projektin GrapesJS: llä.

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

Jatkan tätä artikkelia ……