craft.js的一个记录,体验拖拽式生成网站,写一个简单的demo
1、craft简介
Craft.js通过模块化页面编辑器的构建模块来解决此问题。它提供了拖放系统,并处理了应呈现,更新和移动用户组件的方式。
官网:https://craft.js.org/
2、demo简介
由于craft.js目前才0.1.0-beta.17
版本,国内没啥资料,记录一下简单demo的实现,可以快速入门
demo简单展示
3、创建项目
项目是使用react
,UI框架官方推荐的是material-ui
,但是我这里用的是ant design
npx create-react-app mydemo
直接放项目依赖,可能后续版本不一致
"dependencies": {
"@craftjs/core": "^0.1.0-beta.17",
"@material-ui/core": "^4.11.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.15.5",
"material-ui-color-picker": "^3.5.1",
"react": "^17.0.2",
"react-contenteditable": "^3.3.5",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
}
把依赖性放到配置文件里面,安装就好了。
npm install
或者使用yarn
,都一样
然后把src/app.js
里面的都删掉
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
然后引入需要的依赖
import React from 'react';
import {
Row, Col } from 'antd';
import './App.css';
import {
Editor, Frame, Element } from "@craftjs/core";
function App() {
return (
<div className="App">
<Row>
<Col span={
16} className="leftBox">
</Col>
<Col span={
8} className="toolBox">
<d