安装

npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm install form-making -S

CDN

目前可以通过 unpkg.com/form-making获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

建议使用 CDN 引入 FormMaking 的用户在链接地址上锁定版本,以免将来 FormMaking 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com

Hello world

通过 CDN 的方式我们可以很容易地使用 FormMaking 来加载表单设计页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
  <div id="app">
    <!-- 需要设置编辑区域高度 -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <!-- 需要在设计器中预览代码需要引入ace.js库 -->
  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
  
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

如果是通过 npm 安装,并希望配合 webpack 使用,请阅读下一节:快速上手