# fastdev-tool

> > 让你的前端代码更加优雅和易于维护

Latest version **0.2.3** (published 2020-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install fastdev-tool
pnpm add fastdev-tool
yarn add fastdev-tool
bun add fastdev-tool
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2020-04-20 |
| First published | 2020-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | hawk |
| Maintainers | nunn |

## Links

- npm: https://www.npmjs.com/package/fastdev-tool
- Repository: https://github.com/nunnly/fastdev-tool
- Homepage: https://github.com/nunnly/fastdev-tool#readme
- Issues: https://github.com/nunnly/fastdev-tool/issues
- npm.io page: https://npm.io/package/fastdev-tool

## Recent versions

- 0.2.3 (latest) — 2020-04-20
- 0.2.2 — 2020-04-07
- 0.2.1 — 2020-04-03
- 0.2.0 — 2020-04-03
- 0.1.8 — 2020-04-03
- 0.1.7 — 2020-04-03
- 0.1.6 — 2020-04-03
- 0.1.5 — 2020-04-03
- 0.1.4 — 2020-04-02
- 0.1.3 — 2020-04-02
- 0.1.2 — 2020-04-02
- 0.1.1 — 2020-04-02
- 0.1.0 — 2020-04-02
- 0.0.4 — 2020-04-02
- 0.0.3 — 2020-04-02
- … 1 more at https://npm.io/package/fastdev-tool/versions

## README

# 前端开发组件

>  让你的前端代码更加优雅和易于维护

我们的目标是, 解耦, 高可用, 高复用, 易维护

### 快速开始

基础使用
```javascript
// 引入包, 并且在Vue.prototype上面添加了两个方法, $rule, $dict;
import fastTool from 'fastdev-tool';
Vue.use(fastTool);

```

高级使用
```javascript
import fastTool from 'fastdev-tool';
import {message} from 'ant-design-vue';

// 注入词典
const dict = {
	userName: [{
		key: '1',
		value: 'admin'
	}]
}
Vue.use(fastTool, {
	fetchErrorHandle(e){ // 设置全局的Fetch的捕获的异常
		message.error(e.message);
	}
	dict:dict // 初始化词典 可以做一个外部文件, 然后导入进来
});

```


使用方式
### Fetch
```javascript

@Fetch()
async loadData(){
	const {data} = await axiosInstance({});
	//do some thing 在这里直接写成功函数, 如果异常, 会进入fetchErrorHandle处理

}

```

### Dict

```vue

<select>
	<option v-for="item in $dict.getDict('词典名称')" :key="item.key">{{
		item.value
	}}</option>
</select>

// 配合ant-design-vue使用
<ASelect :options="$dict.getSelectOptions('词典名称')" />

$dict.getDictText('词典名称', '词典的key') => 返回词典的title

$dict.addDict('词典名称', [{
    key: '1',
    title: '词典的标签',
    value: '词典的值'// 如果不传入,在返回 select options的时候会返回key值
}], force)// 最后一个参数 boolean 如果为 true 可以覆盖词典





```

### FormRule

```javascript
<AFormItem label="用户名">
    <AInput
      v-decorator="[
        'userName',
        {
          rules: $rule('用户名')
            .required()
            .max(10)
        }
      ]"
    />
</AFormItem>

//或者
rules: {
  userName: this.$rule('用户名').required().max().min().len().eumn([1,2,3])
}

//由于$rule('用户名')返回的是一个FormRule实例, 这个实例是继承自Array的
//所以你可以自由的使用Array的方法, 注意push这类的方法返回的不是this, 所以不能直接使用
// 你也可以自己往FormRule的原型上面添加方法
this.$rule('标签名称').required().concat({
  validator(rule, value, callback){
      // do something
  }
})


```

### config

- fetchErrorHandle 异步捕获异常处理函数

```javascript
// 设置全局的Fetch的捕获的异常, 除了初始化的设置, 也可以手动进行修改
import {config} from 'fastdev-tool';
import { message } from 'ant-design-vue'
config.fetchErrorHandle = function(e){
	message.error(e.message);
}

```

### todoList
 [ ] rule 自定义消息体

---
_Source: https://npm.io/package/fastdev-tool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._