zk-commons-vue

如何对接zk-commons-vue

1. 安装zk-commmons-vue

yarn add zk-commons-vue

2. 配置axios请求

在宿主项目的如下路径：src\api\request.ts
配置如下内容：

import { Requestor } from 'zk-commons-vue/src/api/requestor'
import { AxiosInstance2 } from 'zk-commons-vue/types'

const service: AxiosInstance2 = new Requestor({
  baseURL: process.env.VUE_APP_HOST_URL
} as any)
  .bindToVue()
  .getAxios()

export default service

3. 配置api请求入口文件

在宿主项目的如下路径：src\api\index.ts
配置如下内容：

import request from './request'
import commonApi from 'zk-commons-vue/src/api'

export default {
  ...commonApi,
  // 自定义的或者要覆盖zk-commons-vue内置api的往下写
}

4. 配置main.ts项目入口文件

在宿主项目的如下路径：src\main.ts
配置如下内容：

import Vue from 'vue'

import 'normalize.css'
import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/element-variables.scss'
import '@/assets/styles/index.scss'

import App from '@/App.vue'
import store from '@/store'
import router from '@/router'
import '@/permission'

//import Directive from '@/directive' // 指令
//import Filter from '@/filter' // 过滤器
import Directive from 'zk-commons-vue/src/directive'
import Filter from 'zk-commons-vue/src/filter'
import { i18n } from '@/utils/i18n'

Vue.use(ElementUI, { size: 'small', i18n: (key, value) => i18n.t(key, value) })

Vue.use(Directive)
Vue.use(Filter)

import { ListData, SearchForm, BaseEdit } from 'zk-commons-vue'
Vue.use(ListData)
Vue.use(SearchForm)
Vue.use(BaseEdit)

Vue.config.productionTip = false
Vue.config.devtools = process.env.NODE_ENV === 'development'

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

功能启用说明

系统参数配置管理功能

1. 需要依赖组件：monaco-editor、monaco-editor-webpack-plugin

yarn add monaco-editor
yarn add monaco-editor-webpack-plugin

Excel配置管理功能

1. 需要依赖组件：x-data-spreadsheet、less、less-loader

yarn add x-data-spreadsheet
yarn add less less-loader -D

相关规则约定

1. axios请求返回的数据，then回调里直接是有效的data数据， 无需再取一次data