二次开发指南

如果你需要更灵活的定制化功能，那么可以选择二次开发本项目。

方法一

1、将本项目clone下来

2、安装依赖

pnpm i

3、启动项目，将直接启动文档项目，用来开发且同步预览

pnpm dev

4、构建项目，生成dist目录。 dist/vue-form-craft.js就是依赖入口！

pnpm build

方法二

1、将本项目的 src 目录copy到你项目里的组件目录下。比如 src/components下，并重命名为 vue-form-craft

2、引入 vue-form-craft/release 到 main.ts 里注册即可。

3、vite.config.ts增加一条路径别名配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@vue-form-craft': fileURLToPath(new URL('./src/components/vue-form-craft', import.meta.url))
    }
  }
})

4、如果你项目里使用了TypeScript，则需要在tsconfig.json里也增加一条路径别名配置

json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vue-form-craft/global"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@vue-form-craft/*": ["./src/components/vue-form-craft/*"],
    }
  }
}

5、最后，你的项目里还需要安装一些依赖，可以根据报错提示来安装缺少的依赖。

npm i lodash vuedraggable-es  json-editor-vue3 ...

6、如果出现报错Uncaught SyntaxError: The requested module '/node_modules/.pnpm/jsoneditor@9.10.5/node_modules/jsoneditor/dist/jsoneditor.min.js?v=3fb8ead3' does not provide an export named 'default' (at json-editor.vue:2:8)

那么还需要增加依赖@originjs/vite-plugin-commonjs。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    viteCommonjs()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@vue-form-craft': fileURLToPath(new URL('./src/components/vue-form-craft', import.meta.url))
    }
  }
})

二次开发指南 ​

方法一 ​

方法二 ​

二次开发指南

方法一

方法二