青锋开源地址（开源多版基础架构）

青锋目前开源了一下版本架构：

springboot+layui+thymeleaf版本

springboot+layui+jsp版本

springboot+vue ant design 前后端分离版本

springcloud+vue/react ant design 前后端分离双版本。

青锋springboot 家谱系统。

拖拽表单源码整合1、git源码到本地

git clone

2、将源码复制到你的项目的组件目录中

一般为components目录，建立"k-form-design目录"，将以源码根目录的下三个文件夹复制进来

packages、static、styles

3、设置项目中k-from-design需要的依赖

这是k-from-design需要的依赖，将下面的依赖与自己的项目对比，将没有安装的依赖都安装一下

 "dependencies": {    "clipboard": "^2.0.6",    "moment": "^2.24.0",    "vue-codemirror-lite": "^1.0.4",    "vue-quill-editor": "^3.0.6",    "vuedraggable": "^2.23.2"  },  "devDependencies": {    "ant-design-vue": "^1.5.1",    "less": "^3.0.4",    "less-loader": "^4.1.0"  },

vue.config.js中less配置，如果已配置可跳过

module.exports = {  css: {    loaderOptions: {      less: {        modifyVars: {          'primary-color': '#13c2c2',          'layout-color': '#9867f7'        },        javascriptEnabled: true      }    }  }}

如果项目中的less及less-loader与上面依赖版本不一致，可能存在版本差异，可以自行去网上查找一下如何启用对应的less版本的内联javascript

注意：因为在整合后，发现primary-color和layout-color与系统的主体配置冲突，则修改内容如下：

对应的引用位置修改如下：

5. k-from-design使用了antd ui的高级配置

这里展示vue-cli 3如何使用antd ui高级配置，vue-cli 2的小伙伴可以自行去antd ui官网查看如何配置

安装babel-plugin-import

yarn add babel-plugin-import --dev

修改babel.config.js文件，配置 babel-plugin-import

 module.exports = {  presets: ["@vue/app"],+  plugins: [+    [+      "import",+      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }+    ]+  ]};

在main.js中注册组件，代码如下：

import KFormDesign from './components/k-form-design/packages'import './components/k-form-design/styles/form-design.less'Vue.use(KFormDesign)