vue-qeelyn-components v2.2.10

vue-qeelyn-components

所有qeelyn vue web项目 的vue处理公共部分 iview 已升级到4.x版本

获取方式

    npm install vue-qeelyn-components --save

公共部分

1. iview-components  (iview公共组件库)
2. util  （基础工具、http请求、excel处理）
3. vuex  （vuex 公共部分的库）

替换iview 上的控件

说明：目前大部分都还是根据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 调用方式

1. util 基础工具

      import Util from "vue-qeelyn-components/util";

2. http 请求库在main.js使用

      import Http from "vue-qeelyn-components/util/http";
      Vue.mixin(Http)

PS:和外部项目合并使用: Object.assign(...)来处理合并

引入api 配合的 sign 处理

1. 默认在页面入口controller设置Cookie http.js 就会帮你处理sign

    ctx.cookies.set('appkey', 'test_key');

vuex 调用方式

在 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);

模板html添加egg模板渲染

   <script>
       window.eggOrgId = '{{orgId}}'
       window.eggLoginOrgId = '{{loginOrgId}}'
       window.eggUid = '{{uid}}'
   </script>

子项目配置 .env 文件 (vue cli 3 特性)

    //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