jdc-vue-toolkit

jdc-vue-toolkit

面向pc端管理系统的ui组件库，基于Vue.js实现

链接

• 开发指南

安装 & 使用

手动安装

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

npm install jdc-vue-toolkit --save

引入

• 使用 babel-plugin-import 或 ts-import-plugin (推荐)

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

• 按需引入

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

• 全量引入

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

Vue.use(jdcVueToolkit)

使用

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

开发

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出组件

组件文档编写

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，查看证书。

遇到的问题

• 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报错 - @坤鹏提出
• [ ] 文档整理 让人更易懂