扫一扫分享
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
{
"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>
);
}
手机预览