ページビルダーの作成:init()

2020年12月21日)

ページビルダーは非常に強力なツールですコードなしでWebページを構築する。ページビルダーからの特別なブロックを使用してWebページを構築できます。ジュニアプログラマーとして、他のページビルダーにお金を払うことは役に立ちません。したがって、このシリーズの記事では、独自のページビルダーを作成します。行きましょう!

写真提供: Christopher Gower on スプラッシュ解除

ステップ1:依存関係を選択してください!

ページビルダーをゼロから作成することは非常にひどい考えです。より多くの時間、より多くの涙、そしてより多くの首の痛み…このシナリオはホラー映画よりもひどいです。

  • ページビルダーフレームワーク: GrapesJS
  • UIフレームワーク: VueJS

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

この記事を続けます……