Oprettelse af en sidebygger: init ()

(21. dec. 2020)

Sidebygere er meget effektive værktøjer til opbygning af websider uden kode. Vi kan oprette websider med specielle blokke fra sidebyggeren. Som junior-programmør er det ikke nyttigt at betale penge for en anden sidebygger. Derfor vil jeg lave min egen sidebygger i denne artikelserie. Lad os gå!

Foto af Christopher Gower Uplash

Trin 1: Vælg dine afhængigheder!

At lave en sidebygger fra nul er en meget forfærdelig idé. Mere tid, mere tårer og mere nakkesmerter … Dette scenarie er mere forfærdeligt end en gyserfilm.

DruerJS og VueJS er mere kraftfulde rammer og meget nok til min sidebygger .

Trin 2: Download!

I dette trin skal jeg downloade disse rammer.

GrapesJS

CDNer

  • 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

eller med npm

  • npm i grapesjs

VueJS

Til udviklingsversion

 

Trin 3: Første opsætning!

I dette trin initialiserer vi vores projekt med 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: [] },
});

Jeg fortsætter denne artikel ……