1

mkdir myapp && cd myapp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$ pnpm dlx create-umi@latest

? Install the following package: create-umi? (Y/n) · true

? Pick Npm Client › pnpm

? Pick Npm Registry › taobao

Write: .gitignore

Write: .npmrc

Write: .umirc.ts

Copy:  layouts/index.tsx

Write: package.json

Copy:  pages/index.tsx

Copy:  pages/users.tsx

Copy:  pages/users/foo.tsx

> @ postinstall /private/tmp/sorrycc-vylwuW

> umi setup

info  - generate files

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

externals: {

   'react': 'var window.React',

   'react-dom': 'var window.ReactDOM',

   'prop-types': 'var window.PropTypes',

   '@alifd/next': 'var window.Next',

   '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',

   '@alilc/lowcode-editor-core': 'var window.AliLowCodeEngine.common.editorCabin',

   '@alilc/lowcode-editor-skeleton': 'var window.AliLowCodeEngine.common.skeletonCabin',

   '@alilc/lowcode-designer': 'var window.AliLowCodeEngine.common.designerCabin',

   '@alilc/lowcode-engine-ext': 'var window.AliLowCodeEngineExt',

   '@ali/lowcode-engine': 'var window.AliLowCodeEngine',

   'moment': 'var window.moment',

   'lodash': 'var window._',

 },

 styles: [

   'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css',

   'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css',

   'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css',

   'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css'

 ],

 scripts: [

   {

     src: 'https://g.alicdn.com/code/lib/react/18.0.0/umd/react.development.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/code/lib/react-dom/18.0.0/umd/react-dom.development.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js',

     defer: false,

   },

   {

     src: 'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js',

     defer: false,

   },

   {

     src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js',

     defer: false,

   },

   {

     src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js',

     defer: false,

   }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

import { init, plugins } from '@alilc/lowcode-engine';

import { useEffect } from 'react';

import registerPlugins from './plugin';

import './global.less';

export default function LowcodeEditor() {

  useEffect(() => {

    const preference = new Map();

    preference.set('DataSourcePane', {

      importPlugins: [],

      dataSourceTypes: [

        {

          type: 'fetch',

        },

        {

          type: 'jsonp',

        },

      ],

    });

    (async function main() {

      await registerPlugins();

      console.log('first-2')

      init(

        document.getElementById('engine-container')!, {

          // designMode: 'live',

          // locale: 'zh-CN',

          enableCondition: true,

          enableCanvasLock: true,

          // 默认绑定变量

          supportVariableGlobally: true,

          // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！

          // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径

          simulatorUrl: [

            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',

            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js',

          ],

          requestHandlersMap: {

            fetch: async () => {}

          }

        },

        preference,

      );

    })();

  }, []);

  return <div id='engine-container' style={{backgroundColor: 'red'}}></div>;

}

1

2

3

4

5

6

7

8

9

import yayJpg from '../assets/yay.jpg';

import LowcodeEditor from '@/components/lowcode-editor2';

export default function HomePage() {

  return (

    <div style={{height: '100%'}}>

      <LowcodeEditor />

    </div>

  );

}