拖拽表单源码整合

1、git源码到本地

git clone https://gitee.com/kcz66/k-form-design.git

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

一般为components目录，建立”k-form-design目录”，将以源码根目录的下三个文件夹复制进来
packages、static、styles
image.png

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

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

  1.  "dependencies": {
  2.     "clipboard": "^2.0.6",
  3.     "moment": "^2.24.0",
  4.     "vue-codemirror-lite": "^1.0.4",
  5.     "vue-quill-editor": "^3.0.6",
  6.     "vuedraggable": "^2.23.2"
  7.   },
  8.   "devDependencies": {
  9.     "ant-design-vue": "^1.5.1",
  10.     "less": "^3.0.4",
  11.     "less-loader": "^4.1.0"
  12.   },

image.png

4、启用less内联javascript

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

  1. module.exports = {
  2.   css: {
  3.     loaderOptions: {
  4.       less: {
  5.         modifyVars: {
  6.           'primary-color': '#13c2c2',
  7.           'layout-color': '#9867f7'
  8.         },
  9.         javascriptEnabled: true
  10.       }
  11.     }
  12.   }
  13. }

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

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

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

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

  1. yarn add babel-plugin-import --dev

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

  1.  module.exports = {
  2.   presets: ["@vue/app"],
  3. +  plugins: [
  4. +    [
  5. +      "import",
  6. +      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
  7. +    ]
  8. +  ]
  9. };

6. 注册全局组件

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

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

k-form-design官网文档地址

http://kcz66.gitee.io/k-form-design/#/zh-cn/guide/start