shu-c-view
Version:
rollup 打包vue@2.7组件库框架
220 lines (158 loc) • 6.54 kB
Markdown
## shuCView
<p align="center">
<a href="#">
<img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="build">
</a>
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-v2.7.16-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.15.12-brightgreen.svg" alt="element-ui">
</a>
<a href="#">
<img src="https://img.shields.io/badge/cdnjs-v1.2.56-blue.svg" alt="vue">
</a>
<a href="#">
<img src="https://img.shields.io/badge/npm-v1.2.56-blue.svg" alt="vue">
</a>
<a href="#">
<img src="https://img.shields.io/badge/gzip--size: JS-82.57 KB-brightgreen.svg" alt="vue">
</a>
<a href="#">
<img src="https://img.shields.io/badge/gzip--size: CSS-15 KB-brightgreen.svg" alt="vue">
</a>
</p>
<font color="red">注意：</font>
`shu-c-view@2.0.0` 版本为 `element-ui@2.15.12` 兼容 `vue@2.7.16`组合式语法所做的升级，如果当前项目是 `vue@2.6` 版本请安装`shu-c-view@1.2.80`。
**特别感谢 `zenkle` 小伙伴为我们的UI组件库提供了一个非常棒的名字`shuCView`。**
使用`element-ui`为基础库二次封装了例如：Grid 带分页的数据列表、Form可配置表单和selectTree下拉树组件等高阶组件。
使用示例和文档说明：内部项目暂不对外提供
安装和快速上手
#### npm 安装
> 安装依赖包
- vue
```shell script
npm i vue2.6.13 --save
```
- element-ui
```shell script
npm i element-ui@2.15.12 --save
```
- shuCView （elementUI 二次扩展库插件）
```shell script
npm i shu-c-view --save
```
- axios-api-query（ajax请求插件）
```shell script
npm i axios-api-query --save
```
- shu-c-data-dict（全局数据字典）用于 grid 组件列配置的 filter 属性，转换列数据使用，比如：128 -> 启用
```shell script
npm i shu-c-data-dict --save
```
- lodash （帮助函数插件）
`lodash`如果使用的是脚手架那么可能脚手架已经帮你安装了（比如：Vue CLI）。
```shell script
npm i lodash --save
```
- sortablejs （html元素节点拖动）
```shell script
npm i sortablejs --save
```
- dayjs （时间处理）
```shell script
npm i dayjs --save
```
#### CDN
cdn 服务网络js文件暂未发布，如果需要使用请至目录：
```
node_modules
└──shu-c-view
lib
└──iife
└──shu-c-view.js
└──theme-default
└──index.css
```
将`shu-c-view.js`和默认主题样式文件`index.css`拷贝到你项目中的 static 目录内，然后使用：
```javascript
<script src="/static/shu-c-view.js"></script>
<link rel="stylesheet" href="/static/theme-default/index.css"/>
```
main.js （webpack中使用）
```javascript
import Vue from 'vue';
new Vue({
created() {
window.shuCView.default.install(Vue);
},
render: h => h(App)
}).$mount('#app')
```
如果 `Vue` 是通过CDN的形式载入，
```javascript
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
则插件会自动进行组件的注册和初始化。
---
#### 快速上手
> 本节将介绍如何在项目中使用 shu-c-view。
- **完整引入**
> 在 main.js 中写入以下内容：
```javascript
import Vue from 'vue';
// 完整引入 element-ui 库和样式文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入 shu-c-view 插件和样式文件
import shuCView from 'shu-c-view';
import 'shu-c-view/lib/cjs/theme-default/index.css';
import App from './App.vue';
// 使用
Vue.use(shuCView)
Vue.use(ElementUI)
new Vue({
render: h => h(App)
}).$mount('#app')
```
注意：以上代码便完成了 ElementUI 和 shu-c-view 的引入。
需要注意的是，完整引入的方式样式文件需要单独引入。
- **按需引入**
注意：按需引入不支持 `<script>` 标签的形式，使用按需引入时可以将 elementUi 也进行按需引入或者 elementUi不使用按需引入只将 shuCView 进行按需引入。
1. ElementUI
[->elementUi按需引入请看官方介绍](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)
2. shuCView
import 引入需要引入的组件文件：
```
node_modules
└──shu-c-view
└──lib
└──cjs
└──select
| └──index.js
└──grid
| └──index.js
└── ...
└──theme-default
└──select.css
└──grid.less
└──...
```
main.js
```javascript
import {BaseSelect} from '@node_modules/shu-c-view/lib/cjs/select/index.js';
import {BaseGrid} from '@node_modules/shu-c-view/lib/cjs/grid/index.js';
import 'shu-c-view/lib/cjs/theme-default/index.css';
// 使用
Vue.use(BaseSelect);
Vue.use(BaseGrid);
```
## Browsers support
Modern browsers and IE10.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
last 2 versions 每个浏览器最新的两个版本
## Contributors
This project exists thanks to all the people who contribute.
作者：[atrpo980](https://gitee.com/zhangh-design)、[zenkle](https://github.com/zenkle)