cxw-components

A Vue 3 + Element Plus component library.

Install

npm install cxw-components element-plus

Usage

Global registration

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CxwComponents from 'cxw-components'
import 'cxw-components/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(CxwComponents)
app.mount('#app')

On-demand import

<script setup>
import { FcButton, FcCard } from 'cxw-components'
import 'cxw-components/dist/style.css'
</script>

<template>
  <fc-button type="primary">Click Me</fc-button>
  <fc-card title="Title" content="Content" />
</template>

网络请求

内置了配置好的 axios 实例，自带请求/响应拦截器，注册插件时一次性配置即可。

基本用法

import { createApp } from 'vue'
import FcUI from 'cxw-components'

const app = createApp(App)
app.use(FcUI, {
  baseURL: 'http://192.168.102.156:80',
  tokenHeaderName: 'fjgtkj-token',
  getToken: () => sessionStorage.getItem('fjgtkj-token'),
})

配置后，在任何组件中直接使用 get / post：

import { get, post } from 'cxw-components'

// GET 请求
get('/fjgtkj/ops/menu/getTreeByCodeAndAuth', { code: 'operations' }).then(res => {
  console.log(res)
})

// POST 请求
post('/api/login', { username: 'admin', password: '123456' })

// 或直接使用原始 axios 实例
import { request } from 'cxw-components'
request.get('/api/users')

完整配置项

| 配置项 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | baseURL | string | '' | 接口基础地址 | | timeout | number | 15000 | 请求超时时间（毫秒） | | withCredentials | boolean | true | 跨域请求是否携带 cookie | | tokenHeaderName | string | 'Authorization' | Token 的请求头名称 | | getToken | () => string \| null | null | 获取 Token 的函数 | | successField | string | 'code' | 接口成功状态字段名 | | successValue | number \| string | 200 | 接口成功的状态值 | | messageField | string | '' | 错误提示字段名（为空则自动找 msg → message） | | dataField | string | '' | 成功时返回的数据字段（空则返回整个 body） |

适配不同后端格式

// 后端返回: { "code": 0, "msg": "ok", "data": [...] }
app.use(FcUI, {
  baseURL: '/api',
  successField: 'code',
  successValue: 0,
  messageField: 'msg',
  dataField: 'data',
})
// get() 直接取到 [...]

// 后端返回: { "status": "success", "list": [...] }
app.use(FcUI, {
  successField: 'status',
  successValue: 'success',
  messageField: 'message',
  dataField: 'list',
})

高级用法 — 直接操作 axios 实例

import { request } from 'cxw-components'

// 添加自定义拦截器
request.interceptors.response.use(...)

// 设置全局默认头
request.defaults.headers.common['X-Custom'] = 'value'

Components

| Component | Description | |-----------|-------------| | FcButton | Button component based on Element Plus | | FcCard | Card component based on Element Plus | | FcToolPanel | Tool panel component | | FcLayout | Layout component |

Development

npm install
npm run dev      # preview server
npm run build:lib  # build library

License

MIT