Mitosis 是一种一次编写组件，可以编译到每种框架中的工具，它非常简单，有自己的一套语法，类似 react，下面我们看用Mitosis编写的组件，同时编译成react、vue2、vue3组件。

mitosis.js编写组件一次，到处运行。编译为Vue、React、Solid、angular、Svelte等。

安装

npm install @builder.io/mitosis-cli @builder.io/mitosis
mitosis.config.js
module.exports = {
files: 'src/**',
targets: ['vue3', 'solid', 'svelte', 'react'],
};

tsconfig.json

// tsconfig.json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@builder.io/mitosis"
}
}

创建组件

// src/components/MyComponent.lite.tsx
import { useStore } from '@builder.io/mitosis';

type Props = {
message: string;
};

export default function MyBasicComponent(props: Props) {
const state = useStore({
name: 'Foo',
});

return (
<div>
{props.message || 'Hello'} {state.name}! I can run in React, Vue, Solid or Svelte!
</div>
);
}

链接: https://fly63.com/nav/3873