1 | # `|` 基于 Vue.js 的UI组件库
|
2 | [![npm version](https://img.shields.io/npm/v/@cgj/k-view.svg?style=flat-square)](https://www.npmjs.org/package/@cgj/k-view)
|
3 | [![build status](https://img.shields.io/travis/SoldierAb/k-view/master.svg?style=flat-square)](https://travis-ci.org/SoldierAb/k-view)
|
4 | [![install size](https://packagephobia.now.sh/badge?p=@cgj/k-view)](https://packagephobia.now.sh/result?p=@cgj/k-view)
|
5 | [![npm downloads](https://img.shields.io/npm/dm/@cgj/k-view.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@cgj/k-view)
|
6 | ![LICENSE](https://img.shields.io/badge/License-MIT-yellow.svg)
|
7 |
|
8 | ## 安装
|
9 | ```shell
|
10 | npm i @cgj/k-view -S
|
11 | ```
|
12 |
|
13 | ## 快速开始
|
14 | ```javascript
|
15 | import KView from '@cgj/k-view'
|
16 | import '@cgj/k-view/lib/kview/style.css'
|
17 | Vue.use(KView);
|
18 |
|
19 | // 或
|
20 | import {
|
21 | Loading,
|
22 | Tree
|
23 | // ...
|
24 | } from '@cgj/k-view'
|
25 |
|
26 | Vue.use(Loading);
|
27 | Vue.use(Tree);
|
28 |
|
29 | ```
|
30 |
|
31 | ## 语言支持
|
32 |
|
33 | ```html
|
34 | <template>
|
35 | <k-provider :locale="locale">
|
36 | <router-view />
|
37 | </k-provider>
|
38 | </template>
|
39 |
|
40 | <script>
|
41 | import Vue from "vue"
|
42 | import Provider from "@cgj/k-view/lib/provider"
|
43 | Vue.use(Provider)
|
44 |
|
45 | // import zhCN from "@cgj/k-view/lib/locale/lang/zh-CN"; // 默认使用
|
46 | import enUS from "@cgj/k-view/lib/locale/lang/en-US";
|
47 |
|
48 | export default{
|
49 | data(){
|
50 | return {
|
51 | locale:enUS
|
52 | }
|
53 | }
|
54 | }
|
55 |
|
56 | <script>
|
57 |
|
58 | ```
|
59 |
|
60 | ## 按需加载
|
61 | 通过 [babel-plugin-kimport](https://github.com/SoldierAb/babel-plugin-kimport) 插件的帮助,我们可以按需引入使用的组件以减小打包体积.
|
62 |
|
63 | 首先,安装 [babel-plugin-kimport](https://www.npmjs.com/package/babel-plugin-kimport):
|
64 |
|
65 | ```bash
|
66 |
|
67 | npm i -D babel-plugin-kimport
|
68 |
|
69 | ```
|
70 |
|
71 | 修改 babel.config.js 的 plugins 配置项:
|
72 |
|
73 | ```javascript
|
74 |
|
75 | module.exports = {
|
76 | plugins:[
|
77 | [
|
78 | 'kimport',
|
79 | {
|
80 | libraryName: '@cgj/k-view',
|
81 | camel2DashComponentName: true,
|
82 | },
|
83 | 'k-view'
|
84 | ],
|
85 | ],
|
86 | };
|
87 |
|
88 | ```
|
89 |
|
90 | ## 浏览器支持
|
91 | Internet Explorer 10+ 等现代浏览器
|
92 |
|
93 |
|
94 | ## 版本日志
|
95 | [release notes](https://github.com/SoldierAb/k-view/releases).
|
96 |
|
97 |
|
98 | ## LICENSE
|
99 | [MIT](LICENSE)
|