vue-asset-web

管理系统公共组件/插件/工具/UI demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

使用

# install
npm install --save timi-vue-web-asset

若出现 Refuse to delete xxx，则删除 node_modules，全部重新install

# import
import 'timi-vue-web-asset/dist/vueAsset.css'
import VueAsset from 'timi-vue-web-asset'

## 最简配置
Vue.use(VueAsset, options = {
  third: {
    qiniu: {
      httpRequest: {
        qiniuTokenUrl(type) {
          return `http://eam-api.h5h5h5.cn/eam/v1.0/common/${type}/qiniu_token`
        }
      }
    }
  }
})

Vue.use(VueAsset, options = {
  // 环境配置
  // false不覆盖
  profile: {},

  // 库配置
  // false不覆盖
  libs: {},

  // 插件安装配置
  // false不安装
  plugins: {},

  // 过滤器安装配置
  // false不安装
  filters: {},

  // 组件安装配置
  // false不安装
  components: {},

  // 第三方扩展配置
  third: {},

  // 工具类配置项
  // false则不覆盖
  utils: {}
})


# 配置项说明
const profile = {
  // 图片域名
  imgDomain: ''
}

const libs = {
  // CKEDITOR，let CKEditor = libs.ckeditor || window.CKEDITOR || window.CKEditor || window.ckeitor
  ckeditor: null
}

const plugins = {
  // axios 插件配置
  // false则不安装
  axios: {
    // axios.defaults
    // false则不覆盖
    defaults: {},
    transformRequest: {
      // 在transformRequest中展开array的数据
      // false 不添加该拦截器
      flatArray: false
    },
    transformResponse: {
      // 在transformResponse中将返回的数据转换为驼峰格式
      // false 不添加该拦截器
      hump: true
    },
    interceptor: {
      // GET禁用缓存， config.cache = true 跳过该拦截器
      // false 不添加该拦截器
      disableCache: true,

      // config.contentType = 'form' 支持post/put/patch 的表单提交方式
      // false 不添加该拦截器
      applicationForm: true,

      // ajax开始时显示loading，最后一个ajax结束时关闭loading, config.loading = false 跳过该拦截器
      // false 不添加该拦截器
      loading: true,

      // 只返回response.data，该拦截器必须放置在所有response拦截器的最后，config.dataOnly = false 跳过该拦截器
      // false 不添加该拦截器
      returnResponseData: true,

      // hmac 认证, config.mac !== false && config.headers.Authorization == null 时启用
      // false 不添加该拦截器
      authMac: {
        MAC_ID: '2YotnFZFEjr1zCsicMWpAA',
        MAC_KEY: 'mac_key',
        SESSION_ID: 'session_id',
        decode: true,
        getMacKey() {
          let macKey = VueCookie.get(this.MAC_KEY) || ''
          return this.decode ? decodeURIComponent(macKey) : macKey
        },
        getSessionId() {
          let sessionId = VueCookie.get(this.SESSION_ID) || ''
          return this.decode ? decodeURIComponent(sessionId) : sessionId
        }
      },

      // 全局错误处理，config.errorHandle = false 跳过该拦截器，config.handleError = false 跳过非异常处理(自定义业务错误时可设置该项)
      // false 不添加该拦截器
      errorHandle: {
        // 全局错误处理器
        errorHandle: error => {...}
      },

      // mock支持, config.mock === true 时启用
      // false 不添加该拦截器
      mock: {
        // mock 的基本路径
        baseURL: ''
      },

      // 请求api时，将数据的驼峰格式转换为下划线格式，config.dataToUnderline = false 跳过该拦截器
      // false 不添加该拦截器
      dataToUnderline: true,

      // remove值为空的请求参数，config.removeEmpty = true 时启用
      // false 不添加该拦截器
      removeEmpty: {}
    }
  }
}

const filters = {
  // 日期格式化过滤器
  // false则不安装
  date: true,

  // 货币格式化过滤器
  // false则不安装
  currency: true,

  // 数组/对象取值过滤器
  // false则不安装
  value: true,

  // 图片url域名补全过滤器
  // false则不安装
  url: true
}

const components = {
  // 富文本编辑器[at-editor]
  // false则不安装
  editor: {},

  // 图片预览, Vue.prototype.showPreview(imgSrc)
  // false则不安装
  messageBox: {},

  // Modal[at-modal]
  // false则不安装
  modal: {},

  // 扩展Vue实例的提示方法,
  // Vue.prototype.[success/info/warning/danger] => elementUI.Notification, 定义了一些默认项
  // false则不安装
  notify: {},

  // 文件/图片上传[at-upload, at-image-upload]
  // 提供的配置将会替换组件props的默认值
  // false则不安装
  upload: {
    // 文件上传组件, 配置项将覆盖原来的props, 具体配置参考elementUI的upload上传组件, 通常只需要提供上传action
    // false则不安装
    upload: {},

    // 图片上传组件, 配置项将覆盖原来的props, 具体配置参考upload组件, 通常只需要提供图片上传action
    // 只有安装了upload，才能安装imageUpload
    // false则不安装
    imageUpload: {}
  },

  // 扩展Vue实例加载中方法
  // Vue.prototype.showLoading 显示加载中动画, Vue.prototype.hideLoading 关闭加载中动画
  // false则不安装
  loader: {}
}

const third = {
  qiniu: {
    httpRequest: {
      /**
      * 七牛上传配置URL
      * @param {*} type
      */
      qiniuTokenUrl(type) {
        return `/v1.0/common/${type}/qiniu_token`
      },
      /**
      * 获取七牛上传配置
      * http://192.168.1.135:9001/eam/swagger-ui.html#!/HomeController/getQiniuTokenUsingGET
      * @param {*} type 1-图片
      */
      getServerConfig(type = 1) {
        return axios({
          url: this.qiniuTokenUrl(type),
          method: 'GET',
          responseType: 'json'
        }).then(data => {
          return {
            domain: data.domainUrl,
            zoneUrl: this.getZoneUrl(data.qiniuZone.upUrls),
            token: data.token
          }
        })
      },
      /**
      * 取七牛上传地址
      * @param {*} qiniuZone
      */
      getZoneUrl(qiniuZone) {
        if (Array.isArray(qiniuZone)) {
          let len = qiniuZone.length
          return qiniuZone[randRange(0, len - 1)]
        }
        return String(qiniuZone)
      }
    }
  }
}

const utils = {
  fmt: {
    // 日期格式化
    date: {
      format: 'yyyy-MM-dd hh:mm:ss'
    },
    // 货币格式化
    currency: {
      // 小数点保留位数
      places: 2,

      // 货币标识
      symbol: '￥',

      // 每千位分隔符
      thousand: ', ',

      // 小数点
      decimal: '.'
    }
  },
  // hmac 认证, 无特殊需要请勿修改默认配置
  authMac: {
    // RequestContent的数据分隔符
    requestContentSymbol: '\n',

    // Mac的数据分隔符
    authMacSymbol: 'MAC',

    // 随机字符串位数
    nonceLen: 8
  }
}

For detailed explanation on how things work, consult the docs for vue-loader.