# JYeontu组件仓库

**Repository Path**: zheng_yongtao/jyeontu-component-warehouse

## Basic Information

- **Project Name**: JYeontu组件仓库
- **Description**: 有趣且可能有用的vue组件开发，欢迎体验，欢迎pr，欢迎star。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 132
- **Forks**: 41
- **Created**: 2021-09-25
- **Last Updated**: 2025-05-10

## Categories & Tags

**Categories**: vue-extensions

**Tags**: vue组件, Vue, 组件库, 前端

## README

# JYeontu 组件仓库

#### 介绍

日常开发组件/工具库
vue 组件 + js 函数工具

封装一些有趣（实用的小组件），后续会不断迭代优化。

#### 项目结构

```txt
┌───babel.config.js
├───examples        //demo代码
├──────examples/App.vue
├──────examples/assets
├─────────examples/assets/1.png
├─────────examples/assets/icon
├────────────examples/assets/icon/iconfont.css
├────────────examples/assets/icon/iconfont.json
├────────────examples/assets/icon/iconfont.ttf
├────────────examples/assets/icon/iconfont.woff
├────────────examples/assets/icon/iconfont.woff2
├─────────examples/assets/logo.png
├─────────examples/assets/logo1.png
├─────────examples/assets/test.jpg
├──────examples/components
├─────────examples/components/common
├────────────examples/components/common/heightligthCode.vue
├────────────examples/components/common/JDropDownBox.vue
├────────────examples/components/common/methodTest.vue
├─────────examples/components/games
├────────────examples/components/games/Tetris
├───────────────examples/components/games/Tetris/config.json
├───────────────examples/components/games/Tetris/control.js
├───────────────examples/components/games/Tetris/Tetris.vue
├───────────────examples/components/games/Tetris/tools.js
├─────────examples/components/menu
├────────────examples/components/menu/left.vue
├────────────examples/components/menu/top.vue
├─────────examples/components/pages
├────────────examples/components/pages/JTabBar.vue
├────────────examples/components/pages/splitHorizontal.vue
├─────────examples/components/Toast
├────────────examples/components/Toast/index.js
├────────────examples/components/Toast/toast.vue
├──────examples/config
├─────────examples/config/router.json
├──────examples/main.js
├──────examples/router
├─────────examples/router/index.js
├──────examples/utils
├─────────examples/utils/dateTool.js
├─────────examples/utils/numsFormat.js
├─────────examples/utils/strTool.js
├──────examples/views
├─────────examples/views/componentShowViews
├────────────examples/views/componentShowViews/calendar.vue
├────────────examples/views/componentShowViews/canvasBroadView.vue
├────────────examples/views/componentShowViews/codeHeightLightView.vue
├────────────examples/views/componentShowViews/electronicNumber.vue
├────────────examples/views/componentShowViews/flowChartView.vue
├────────────examples/views/componentShowViews/JCommentView.vue
├────────────examples/views/componentShowViews/JDialogView.vue
├────────────examples/views/componentShowViews/JDropDownBoxView.vue
├────────────examples/views/componentShowViews/JFloatDivView.vue
├────────────examples/views/componentShowViews/JHoverBtnView.vue
├────────────examples/views/componentShowViews/JNumRollingView.vue
├────────────examples/views/componentShowViews/JStepsView.vue
├────────────examples/views/componentShowViews/JTableView.vue
├────────────examples/views/componentShowViews/JTagListView.vue
├────────────examples/views/componentShowViews/JToastView.vue
├────────────examples/views/componentShowViews/JToolTipView.vue
├────────────examples/views/componentShowViews/JWordCloudView.vue
├─────────examples/views/games
├────────────examples/views/games/tetris.vue
├─────────examples/views/homePage
├────────────examples/views/homePage/homePage.vue
├─────────examples/views/installView.vue
├─────────examples/views/utilsTools
├────────────examples/views/utilsTools/dateToolView.vue
├────────────examples/views/utilsTools/numsFormatView.vue
├────────────examples/views/utilsTools/strToolView.vue
├─────────examples/views/versionInfo.vue
├───jsconfig.json
├───lib
├──────lib/demo.html
├──────lib/jvuewhell.common.js
├──────lib/jvuewhell.css
├──────lib/jvuewhell.umd.js
├──────lib/jvuewhell.umd.min.js
├───package-lock.json
├───package.json
├───packages        //组件代码
├──────packages/index.js
├──────packages/JCalendar
├─────────packages/JCalendar/index.js
├─────────packages/JCalendar/src
├────────────packages/JCalendar/src/JCalendar.vue
├──────packages/JCanvasBroad
├─────────packages/JCanvasBroad/index.js
├─────────packages/JCanvasBroad/src
├────────────packages/JCanvasBroad/src/JCanvasBroad.vue
├──────packages/JCodeHeightLight
├─────────packages/JCodeHeightLight/index.js
├─────────packages/JCodeHeightLight/src
├────────────packages/JCodeHeightLight/src/JCodeHeightLight.vue
├──────packages/JComment
├─────────packages/JComment/img
├────────────packages/JComment/img/表情.png
├────────────packages/JComment/img/评论.png
├─────────packages/JComment/index.js
├─────────packages/JComment/src
├────────────packages/JComment/src/JComment.vue
├──────packages/JDialog
├─────────packages/JDialog/index.js
├─────────packages/JDialog/src
├────────────packages/JDialog/src/JDialog.vue
├──────packages/JDropDownBox
├─────────packages/JDropDownBox/index.js
├─────────packages/JDropDownBox/src
├────────────packages/JDropDownBox/src/JDropDownBox.vue
├──────packages/JElectronicNumber
├─────────packages/JElectronicNumber/index.js
├─────────packages/JElectronicNumber/src
├────────────packages/JElectronicNumber/src/JElectronicNumber.vue
├──────packages/JFloatDiv
├─────────packages/JFloatDiv/index.js
├─────────packages/JFloatDiv/src
├────────────packages/JFloatDiv/src/JFloatDiv.vue
├──────packages/JFlowChart
├─────────packages/JFlowChart/index.js
├─────────packages/JFlowChart/src
├────────────packages/JFlowChart/src/JFlowChart.vue
├──────packages/JFold
├──────packages/JHoverBtn
├─────────packages/JHoverBtn/index.js
├─────────packages/JHoverBtn/src
├────────────packages/JHoverBtn/src/JHoverBtn.vue
├──────packages/JMessageBox
├─────────packages/JMessageBox/index.js
├─────────packages/JMessageBox/src
├────────────packages/JMessageBox/src/main.js
├────────────packages/JMessageBox/src/main.vue
├──────packages/JNumRolling
├─────────packages/JNumRolling/index.js
├─────────packages/JNumRolling/src
├────────────packages/JNumRolling/src/JNumRolling.vue
├──────packages/JSteps
├─────────packages/JSteps/index.js
├─────────packages/JSteps/src
├────────────packages/JSteps/src/JSteps.vue
├──────packages/JTable
├─────────packages/JTable/index.js
├─────────packages/JTable/src
├────────────packages/JTable/src/JTable.vue
├────────────packages/JTable/src/JTr.vue
├──────packages/JTagList
├─────────packages/JTagList/index.js
├─────────packages/JTagList/src
├────────────packages/JTagList/src/JTagList.vue
├──────packages/JToast
├─────────packages/JToast/index.js
├─────────packages/JToast/src
├────────────packages/JToast/src/JToast.vue
├──────packages/JToolTip
├─────────packages/JToolTip/index.js
├─────────packages/JToolTip/src
├────────────packages/JToolTip/src/JToolTip.vue
├──────packages/JWordCloud
├─────────packages/JWordCloud/components
├────────────packages/JWordCloud/components/renderColor.vue
├─────────packages/JWordCloud/index.js
├─────────packages/JWordCloud/src
├────────────packages/JWordCloud/src/JWordCloud.vue
├──────packages/pagesTools
├─────────packages/pagesTools/JTabBar.vue
├─────────packages/pagesTools/splitHorizontal.vue
├──────packages/utils
├─────────packages/utils/dateTool.js
├─────────packages/utils/numsFormat.js
├─────────packages/utils/strTool.js
├───postcss.config.js
├───public
├──────public/favicon.ico
├──────public/index.html
├───README.md
└───vue.config.js
```

#### 安装教程

##### 本地启动项目

1. git clone https://gitee.com/zheng_yongtao/jyeontu-component-warehouse.git
2. npm install
3. npm run serve

##### 项目引入

###### npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

```shell
npm i @jyeontu/jvuewheel -S
```

###### main.js 引入

引入后便可以在项目中直接使用

```shell
//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);
```

#### 效果预览

[预览地址(使用文档)](http://jyeontu.xyz/jvuewheel/#/homePage)

#### 组件文档

组件文档：[http://jyeontu.xyz/jvuewheel/#/homePage](http://jyeontu.xyz/jvuewheel/#/homePage)

#### 组件实现说明

[https://juejin.cn/column/7326801745261330482](https://juejin.cn/column/7326801745261330482)

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 联系

个人博客：[http://jyeontu.xyz/JYeontuBlog/#/home](http://jyeontu.xyz/JYeontuBlog/#/home)

CSDN：[https://blog.csdn.net/Twinkle_sone](https://blog.csdn.net/Twinkle_sone)

Gitee：[https://gitee.com/zheng_yongtao](https://gitee.com/zheng_yongtao)

GitHub：[https://github.com/yongtaozheng](https://github.com/yongtaozheng)

掘金：[https://juejin.cn/user/440244290727294](https://juejin.cn/user/440244290727294)

公众号：前端也能这么有趣