# jdc-vue-toolkit

> A Vue.js 2. UI Toolkit

Latest version **1.0.15** (published 2020-03-06) · Apache license · 0 weekly downloads

## Install

```sh
npm install jdc-vue-toolkit
pnpm add jdc-vue-toolkit
yarn add jdc-vue-toolkit
bun add jdc-vue-toolkit
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2020-03-06 |
| First published | 2019-10-18 |
| Weekly downloads | 0 |
| License | Apache |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | jiangdonghai |

## Links

- npm: https://www.npmjs.com/package/jdc-vue-toolkit
- npm.io page: https://npm.io/package/jdc-vue-toolkit

## Dependencies (2)

- [axios](https://npm.io/package/axios.md) ^0.19.0
- [element-ui](https://npm.io/package/element-ui.md) ^2.12.0

## Recent versions

- 1.0.15 (latest) — 2020-03-06
- 1.0.14 — 2020-02-26
- 1.0.13 — 2020-02-17
- 1.0.11 — 2020-01-08
- 1.0.10 — 2019-12-18
- 1.0.9 — 2019-12-18
- 1.0.8 — 2019-12-17
- 1.0.7 — 2019-12-17
- 1.0.5 — 2019-11-25
- 1.0.4 — 2019-11-17
- 1.0.3 — 2019-11-16
- 1.0.2 — 2019-11-11
- 1.0.1 — 2019-10-18

## README

<h2 align="center">jdc-vue-toolkit</h2>
<p align="center">面向pc端管理系统的ui组件库，基于Vue.js实现</p>
<br/>

## 链接

* [开发指南](site/docs/development.md)

## 安装 & 使用

### 手动安装
在已有项目里手动安装 jdc-vue-toolkit 的包。

```bash
npm install jdc-vue-toolkit --save
```

### 引入

* 使用 <a href="https://github.com/ant-design/babel-plugin-import" target="_blank">babel-plugin-import</a>
  或
  <a href="https://github.com/Brooooooklyn/ts-import-plugin" target="_blank">ts-import-plugin</a> (推荐)

```javascript
import { TimeButton } from '@jd/jdc-vue-toolkit'
```

* 按需引入

```javascript
import TimeButton from '@jd/jdc-vue-toolkit/lib/time-button'
```

* 全量引入

```javascript
import Vue from 'vue'
import jdcVueToolkit from '@jd/jdc-vue-toolkit'
import 'jdc-vue-toolkit/lib/jdc-vue-toolkit.css'

Vue.use(jdcVueToolkit)
```

### 使用

选择需要的组件开始构建您的web应该，详细内容请查看[快速上手]()。

## 开发

```bash
git clone *****/jdc-vue-toolkit.git
cd jdc-vue-toolkit
npm install
npm run dev
```
打开浏览器访问http://127.0.0.1:4000， 详细内容请查看[开发指南]()。

## 新建组件
在components/组件名文件夹
    - demo
    - index.vue
    - README.md
在components/index.js里添加对新组件的引用
在examples/demo-index.js 中export出组件

## 组件文档编写

```bash
cd site
npm install
npm run generate
npm run start
```
打开浏览器访问http://127.0.0.1:8080。
打开components对应组件里的README.md

如果组件菜单里，可以打开examples/components.json、demo-index.js添加

## 证书
jdc-vue-toolkit使用Apache License 2.0，查看[证书](LICENSE)。


### 遇到的问题
- 1. 报错： [Vue warn]: Failed to mount component: template or render function not defined.found in....

解决方法：
examples/components.json中组件的name 必须与
examples/demo-index.js中 export {default as name} from 'xxx'的name一样。
  例如：
  demo-index.js:
  ```
  export {default as Dialog} from '../components/Dialog/demo'
  ```
  components.json:
  ```
  {
    "path": "/Dialog",
    "name": "Dialog", //如果此处name不是Dialog会抛出异常- 必须完全一致，大小写不一致也会报错
    "text": "弹出框"
  },
  ```

- 2. vue中使用jsx可以写成中划线写法。如果将`<el-form>`写做`<ELForm>` element-ui会无法识别，进而报错 （todo: 不知道跟按需引入有关系不? 在项目中全部引入elemnt-ui时可以渲染`<ElForm>`这种写法）

- 3. 配置样式规范报错：
```
in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
```
解决方法： 在webpack.base.conf.js中配置
```
   {
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'file-loader'
  }
```

todo

`新组件`
 - [ ] 文件下载组件
 - [ ] table单元格编辑组件（类似excel操作）

 `优化`
 - [x] 添加了table全选/选择功能
 - [x] tableEvents事件举例
 - [x] currentPage pageSize命名不应该写死
 - [x] validate使用举例
 - [x] 将pagnation的所有属性和方法暴露出来
 - [x] table组件操作，根据row status显示操作，有时候每个项目每个状态都不一样，但是都要显示某个操作（比如详情）时，就会有问题 -@ 盛盟提出
 - [x] table组件pageSize报错 - @坤鹏提出
 - [ ] 文档整理 让人更易懂

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