# vfan-ui

> learning for element

Latest version **0.2.23** (published 2021-03-10) · 0 weekly downloads

## Install

```sh
npm install vfan-ui
pnpm add vfan-ui
yarn add vfan-ui
bun add vfan-ui
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.23 |
| Published | 2021-03-10 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | ferrycoln |
| Keywords | vue, vfan-ui |

## Links

- npm: https://www.npmjs.com/package/vfan-ui
- Repository: https://github.com/fwj722/vfan-ui
- Homepage: https://github.com/fwj722/vfan-ui#readme
- Issues: https://github.com/fwj722/vfan-ui/issues
- npm.io page: https://npm.io/package/vfan-ui

## Dependencies (7)

- [moment](https://npm.io/package/moment.md) ^2.29.1
- [core-js](https://npm.io/package/core-js.md) ^3.4.4
- [xgplayer](https://npm.io/package/xgplayer.md) ^2.16.2
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.11
- [scrollparent](https://npm.io/package/scrollparent.md) ^2.0.1
- [vue-observe-visibility](https://npm.io/package/vue-observe-visibility.md) ^1.0.0

## Recent versions

- 0.2.23 (latest) — 2021-03-10
- 0.2.22 — 2020-11-01
- 0.2.21 — 2020-10-31
- 0.2.2 — 2020-10-31
- 0.1.73 — 2020-09-18
- 0.1.72 — 2020-09-18
- 0.2.1 — 2020-08-23
- 0.2.0 — 2020-08-01
- 0.1.2 — 2020-05-16
- 0.1.1 — 2020-05-12
- 0.1.0 — 2020-03-17

## README

## vfan-ui

### 起源

vfan-ui 是一套基于Vue开发UI 组件库。开发这个组件库的目的在于：
1. 扩展`Element-UI`中没有的组件，和扩展`Element-UI`组件中的一些组件功能。
2. 对工作中的常用的基于业务场景的组件的开发，方便在业务中使用。

### 说明

- 组件库的依赖情况：
1. 一部分是基于`Element-UI`中的组件进行开发，减少没必要的组件封装，如单选、复选、表单等，减少没必要的代码冗余。
2. 还有一部分是不依赖于`Element-UI`，可以独立出来的组件。

###  优点
1. 代码精简，组件的复用性和扩展性强。
2. 直接引入和按需引入，可以根据需要灵活选择。
2. 组件的延伸性强，不强依赖于某个组件库，可以根据项目中不同的组件库(如：`Element-UI`、`iView`、`ant-design`等)轻松植入。

### npm 安装
```
npm i vfan-ui
```

### 使用说明

你可以引入整个 vfan-ui，也可进行按需加载组件
1. 完整引入
在 main.js 中写入以下内容：

```js
import Vue from 'vue';
import  vfanUi from 'vfan-ui';
import "vfan-ui/dist/vfan-ui.css";
import App from './App.vue';

Vue.use(vfanUi);

new Vue({
  el: '#app',
  render: h => h(App)
});
```
2. 按需引入
借助 `babel-plugin-component`，我们可以只引入需要的组件，以达到减小项目体积的目的。

    然后，将 .babelrc 修改为：

```json
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "vfan-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```
在 main.js 中写入以下内容：

```js
import Vue from 'vue';
import {Button} from 'vfan-ui';
import App from './App.vue';

Vue.use(Button);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

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