所有qeelyn vue web项目 的vue处理公共部分 iview 已升级到4.x版本
npm install vue-qeelyn-components --save
1. iview-components (iview公共组件库)
2. util (基础工具、http请求、excel处理)
3. vuex (vuex 公共部分的库)
说明:目前大部分都还是根据ivieiw上的文档继续执行不会改变iview源码,而是对源码对应的控件进行替换成本项目的控件进行设置。但api会增加不会改变原来iview的文档
使用位置 -> admin.js
import doInputNumber from 'vue-qeelyn-components/iview-components/doInputNumber'
// 在Vue.use(iView)下方增加引入,InputNumber对应iview的控件命名这样项目内会自己替换掉
Vue.component('InputNumber', doInputNumber);
目前替换的控件
1.InputNumber //主要处理控件输入的值问题
2.Table //主要添加了自定义表头数据展示的功能
在 *.vue中使用
import Footer from "vue-qeelyn-components/iview-components/footer";
export default {
components: {
LayoutFooter: Footer //担心冲突就这样写 不担心直接放入Footer
},
...
}
- util 基础工具
import Util from "vue-qeelyn-components/util";
- http 请求库在main.js使用
import Http from "vue-qeelyn-components/util/http";
Vue.mixin(Http)
PS:和外部项目合并使用: Object.assign(...)来处理合并
- 默认在页面入口controller设置Cookie http.js 就会帮你处理sign
ctx.cookies.set('appkey', 'test_key');
在 store.js 中使用
import qeelynModules from "vue-qeelyn-components/vuex";
import othenModules from "..."; //外部项目vuex
let modules = Object.assign(qeelynModules,othenModules) ;
export default new Vuex.Store({
...
modules,
...
})
在main.js中,store设置uid与orgId
store.dispatch('qeelynLocal/setUid', window.eggUid);
store.dispatch('qeelynLocal/setOrgId',window.eggOrgId);
store.dispatch('qeelynLocal/setLoginOrgId',window.eggLoginOrgId);
<script>
window.eggOrgId = '{{orgId}}'
window.eggLoginOrgId = '{{loginOrgId}}'
window.eggUid = '{{uid}}'
</script>
//axios的host配置
VUE_APP_AXIOS_HOST=XXX
//启动token自动刷新
VUE_APP_AUTO_JWT_REFRESH=1
//最大刷新token时间默认30分钟
VUE_APP_AUTO_JWT_REFRESH_MAXTIME=1800
//等待几秒后没有请求去更新token
VUE_APP_AUTO_JWT_REFRESH_TIMEOUTTIME=2
调用方式
process.env.VUE_APP_AXIOS_HOST
process.env.VUE_APP_AUTO_JWT_REFRESH
拖拽控件 https://www.npmjs.com/package/vuedraggable