# wheel-hcjv

**Repository Path**: what_and/wheel

## Basic Information

- **Project Name**: wheel-hcjv
- **Description**: 基于 Vue 2 开发的一款轻量级组件库雏形。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2020-11-06
- **Last Updated**: 2023-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 关于 Wheel-hcjv

## 开发目的

出于对前端技术更深入的了解与学习而制作的一个 UI 组件库。

## 基本信息

Wheel-hcjv 是一套基于 Vue.js 的开源 UI 组件库，目前主要用于 PC 界面。

Wheel-hcjv 的色彩搭配以及组件的开发思路参考了一些成熟的 UI 框架(如：[Element](https://element.eleme.cn/#/zh-CN)、[View UI](http://v1.iviewui.com/)、[Ant Design Vue](https://www.antdv.com/docs/vue/introduce-cn/))

目前是 Wheel-hcjv 的雏形阶段，请勿在生产环境中使用，后续时间会完成组件多样化，完善多端适配，处理多端兼容性问题。

[文档地址](https://what_and.gitee.io/wheel-hcjv)

[npm](https://www.npmjs.com/package/wheel-hcjv)


## 安装教程

### 引入 Wheel-hcjv
在基于 vue-cli 的基础上使用更加便捷。

### 1.安装脚手架工具
[vue-cli](https://cli.vuejs.org/)

```js
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
```
### 2.创建一个项目
使用命令行进行初始化,并配置项目

```js
vue create wheel-hcjv-demo
```

### 3.使用组件

```js
npm i -save wheel-hcjv
```

引入:
```js
//main.js
import 'wheel-hcjv/dist/wheel-hcjv.css'
```
局部导入组件:

```vue
//App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <w-button>A default button</w-button>
  </div>
</template>

<script>
import {Button as WButton} from 'wheel-hcjv'

export default {
  name: 'App',
  components: {
    HelloWorld,
    WButton
  }
}
</script>
```

### 目前可用组件列表：
* Icon
* Button
* ButtonGroup
* Cascader
* CascaderItems
* Collapse
* CollapseItem
* Row
* Col
* Nav
* NavItem
* SubNav
* Slides
* SlidesItem
* Tabs
* TabsBody
* TabsItem
* TabsHead
* TabsPanel
* Table
* Toast