페이지 빌더 만들기 : init ()

(2020 년 12 월 21 일)

페이지 빌더는 코드없이 웹 페이지 구축. 페이지 빌더에서 특수 블록으로 웹 페이지를 만들 수 있습니다. 주니어 프로그래머로서 다른 페이지 빌더에 돈을 지불하는 것은 유용하지 않습니다. 따라서이 기사 시리즈에서는 나만의 페이지 빌더를 만들겠습니다. 가자!

사진 : Christopher Gower on Unsplash

1 단계 : 종속성 선택!

페이지 빌더를 0에서 만드는 것은 매우 끔찍한 생각입니다. 더 많은 시간, 더 많은 눈물, 더 많은 목 통증…이 시나리오는 공포 영화보다 더 끔찍합니다.

GrapesJS 및 VueJS는 더 강력한 프레임 워크이며 내 페이지 빌더에 매우 적합합니다. .

2 단계 : 다운로드 중!

이 단계에서는 이러한 프레임 워크를 다운로드해야합니다.

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

또는 npm 사용

  • npm i grapesjs

VueJS

개발 버전

 

3 단계 : 첫 번째 설정!

이 단계에서는 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: [] },
});

이 기사를 계속하겠습니다 ……