青锋开源地址(开源多版基础架构)
青锋目前开源了一下版本架构:
springboot+layui+thymeleaf版本
springboot+layui+jsp版本
springboot+vue ant design 前后端分离版本
springcloud+vue/react ant design 前后端分离双版本。
青锋springboot 家谱系统。
拖拽表单源码整合
1、git源码到本地
git clone https://gitee.com/kcz66/k-form-design.git
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"
},
4、启用less内联javascript
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 }
+ ]
+ ]
};
6. 注册全局组件
在main.js中注册组件,代码如下:
import KFormDesign from './components/k-form-design/packages'
import './components/k-form-design/styles/form-design.less'
Vue.use(KFormDesign)