安装方式

Reactive Form 模型层没有任何第三方依赖。视图层分为 React 版和 Vue 版，除了安装 Reactive Form 外，还需要安装 React 17+ 以及 ReactDOM 17+ 或 Vue 3.2.37+。

使用 yarn 或 npm 下载

yarn add rcfm

npm install rcfm --save

使用打包工具引用

Reactive Form 的 npm 包中含有完整的模型层和视图层资源，并提供了 subpath exports 以方便对资源的引用，请确保使用的 Node 和打包工具已更新到支持该特性的版本，否则会出现引用错误。

Reactive Form 的样式文件包含 css 和 sass 两种版本，如需在 js 中引用，请正确配置打包工具的 sass 或 css loader/plugin。

import 'rcfm/style'             // 引入样式
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'     // 引入模型
import { UI } from 'rcfm/react' // 引入视图

const {reactive} = Form.create()                  // 实例化模型
const Builder = UI.use('React.View.Form.Builder') // 使用视图
ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <Builder reactive={reactive} />
)

import 'rcfm/style'           // 引入样式
import * as Vue from 'vue'
import { Form } from 'rcfm'   // 引入模型
import { UI } from 'rcfm/vue' // 引入视图

const {reactive} = Form.create()                // 实例化模型
const Builder = UI.use('Vue.View.Form.Builder') // 使用视图
Vue.createApp({
  setup() { return {reactive} },
  components: {Builder},
  template: `<Builder :reactive="reactive" />`
}).mount('#root')

使用 sass 版样式

如需覆盖 sass 变量，可以在 sass 入口文件中引入 sass 版本的样式和自定义变量。

// 自定义变量
@import 'path_to_your_sass_variables'
// sass 版样式文件
@import 'path_to_node_modules/rcfm/src/ui/style/index'

之后，与其他 js 文件一起引用。

import 'path_to_your_sass_entry' // sass 入口文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'      // 引入模型
import { UI } from 'rcfm/react'  // 引入视图

const {reactive} = Form.create()                  // 实例化模型
const Builder = UI.use('React.View.Form.Builder') // 使用视图
ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <Builder reactive={reactive} />
)

import 'path_to_your_sass_entry' // sass 入口文件
import * as Vue from 'vue'
import { Form } from 'rcfm'      // 引入模型
import { UI } from 'rcfm/vue'    // 引入视图

const {reactive} = Form.create()                // 实例化模型
const Builder = UI.use('Vue.View.Form.Builder') // 使用视图
Vue.createApp({
  setup() { return {reactive} },
  components: {Builder},
  template: `<Builder :reactive="reactive" />`
}).mount('#root')

在浏览器中直接引用

如果项目不基于包管理器和打包工具开发，可以在 HTML 中直接引入 cdn 上的 Reactive Form 资源文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hi rcfm ~</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/rcfm/dist/css/rcfm.style.min.css">
  </head>
  <body>
    <h1>Hi rcfm ~</h1>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.model.iife.min.js"></script>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.helper.iife.min.js"></script>
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.react.iife.min.js"></script>
    <script>
      console.log(Object.keys(ReactiveForm))
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hi rcfm ~</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/rcfm/dist/css/rcfm.style.min.css">
  </head>
  <body>
    <h1>Hi rcfm ~</h1>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.model.iife.min.js"></script>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.helper.iife.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/rcfm/dist/js/rcfm.vue.iife.min.js"></script>
    <script>
      console.log(Object.keys(ReactiveForm))
    </script>
  </body>
</html>

在 NodeJS 中使用模型

const { Form } = require('rcfm') // 引入模型

const {reactive} = Form.create() // 实例化模型