安装

npm install paiui

更新

npm update paiui

初始化

import Vue from 'vue'
// 引入库文件
import PaiUI from 'paiui'
// 引入样式文件
import 'paiui/dist/paiui.css'
// 初始化
Vue.use(PaiUI, {
  // 基础服务地址
  baseURL: 'http://pai.flyrise.cn',
  // oss服务地址，默认与baseURL一致
  ossURL: 'http://pai.flyrise.cn',
  // 流水号服务地址，默认与baseURL一致
  snURL: 'http://pai.flyrise.cn',
  // 获取token方法
  token: () => {
    // 如：Cookies.get(`token`)
    return 'xxx'
  },
  // 获取ossToken方法
  ossToken: () => {
    // 如：Cookies.get(`token`)
    return 'yyy'
  },
  // 国际化设置，默认为zh-CN
  // locale: 'en',
})

组件公共属性

<p-xxx baseURL="..." cacheKey="..." token="..." ossToken="..."></p-xxx>

baseURL

设置该属性可以使当前组件改变请求的baseURL

token(String|Function)

设置该属性可以指定当前组件请求的token

按需引入

validator

import validator from 'paiui/dist/packages/validator'
Vue.use(validator)

可选安装包

chart

import 'paiui/dist/packages/components/pChart.css'
import pChart from 'paiui/dist/packages/components/pChart'
Vue.use(pChart)

report

import Report from 'paiui/dist/packages/report'
Vue.use(
  new Report({
    url: '/logan-web-api/logan-web/logan/web/upload.json', // 埋点接口
    appId: 'paiui-demo', // 可与app保持一致
    version: '1.0.0', // 应用版本号
    interval: 3000, // 自动report延迟毫秒
  })
)

Api creator

import ApiCreator from 'paiui/dist/packages/apiCreator'
//
// 接口定义
import api from '@/api'
//
// axios配置
const axiosCreateConfig = { baseURL: 'https://...' }
//
// 初始化
const apiCreator = new ApiCreator(api, axiosCreateConfig)
//
// axios拦截器
apiCreator.interceptors.request.use(
  (config) => {
    // ...
    return config
  },
  (error) => {
    // ...
    return Promise.reject(error)
  }
)
apiCreator.interceptors.response.use(
  (response) => {
    // ...
    return response.data
  },
  (error) => {
    // ...
    return Promise.reject(error)
  }
)
//
// 挂载方法至实例原型（推荐方式）
Vue.prototype.$demo = {
  api: apiCreator.api,
  request: apiCreator.request
}