1.0.17 • Published 4 years ago
xuanyue v1.0.17
通过长时间的业务积累,沉淀出了一些可复用程度较高的通用组件, 该组件基于 antd
快速上手
快速开始
第一步
需要在项目的初始化的 index 文件里面首先对改组件库进行初始化,并传入必要参数
import { Configure } from 'xuanyue';
Configure.init({client:'2'});
以下是需要传入的初始化参数
// 接口地址: https://wwww.xxxxxxx.com
const origin = '';
// 项目构建部署路径(注意在最后携带斜线):/xxxx/
const deployDirectory = '/xiaoMing-bms/';
// 项目全路径
const href = `${origin}${deployDirectory === '/' ? '' : deployDirectory}`;
// api前缀
const apiPrefix = `${href}api`;
// 下载路径
// const downloadApi = `${href}file/download`;
const downloadApi = `/xiaoMing-file/api/file/file/download`;
// /xiaoMing-file/api/file/file/download
// 上传路径
// const uploadApi = `/xiaoMing-file/api/file/file/upload`;
const uploadApi = `/xiaoMing-file/api/file/file/upload`;
// im
const socketApi = `${href}im`;
// 客户端标识
const client = '00';
// 全局配置
let configure = {
origin,
deployDirectory,
href,
apiPrefix,
downloadApi,
uploadApi,
socketApi,
client,
api:{},
};
该 ui 库内部会获取网站 token
用于请求登录状态的确定,所以请在登录结束后
存在本地localStorage.setItem('token','xxxx')
里面一个token
第二步
在跟组价里面套上 这个 SettingProvider
import React from 'react';
import { connect } from 'umi';
import ProLayout from '../components/proLayout';
import SettingProvider from '../components/context/settingProvider';
const BasicLayoutOld = (props) => {
return (
<SettingProvider>
<App {...props} />
</SettingProvider>
);
};
第三步
肆无忌惮的使用每个组件
举个例子
import React, { useState } from 'react';
import { InputNumberCustom } from 'xuanyue';
import './App.less';
export default () => {
const [value, setValue] = useState('');
return (
<div>
<InputNumberCustom
style={{ width: '200px' }}
value={value}
onChange={(i) => {
setValue(i);
}}
/>
</div>
);
};
组件列表
export { default as TextAreaEnhance } from './Input/textAreaEnhance';
export { default as SelectCustom } from './Input/selectCustom';
export { default as InputNumberCustom } from './Input/inputNumberCustom';
export { default as TablePage } from './TablePage';
export { default as FileImport } from './file/fileImport';
export { default as FormItemUpload } from './file/formItemUpload';
export { default as FileDownload } from './file/fileDownload';
export { default as WrapTabs } from './wrapTabs';
export { default as useRequest } from './request';
export { default as request } from './request/request';
export { default as LayoutSetting } from './layoutSetting';
export { default as UseConnect } from './context/useConnect';
export { default as Connect } from './context/connect';
export { default as SettingContext } from './context/index';
export { default as SettingProvider } from './context/settingProvider'; // 必须要在最外层套这个组件
export { default as Configure } from './utils/configure'; // 初始化所有配置
// 工具函数
export { default as LocalStorage } from './utils/localStorage';
export { default as Events } from './utils/events';
注:该组件为业务内部使用
快速开始(开发组件库)
安装依赖,
$ npm i/yarn
启动服务,开发
$ npm start
打包文档,
$ npm run docs:build
打包可上传的 npm 包
$ npm run build
发布 npm 包
$ npm run release
项目目录划分
目录名称 | |
---|---|
demo | 存放组件实例代码 |
src | 组件目录 |
该项目通过 dumi 创建,详情请访问https://d.umijs.org/zh-CN