# base-sc-vue-ui

> rollup 打包vue组件库框架

Latest version **1.0.0** (published 2021-06-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install base-sc-vue-ui
pnpm add base-sc-vue-ui
yarn add base-sc-vue-ui
bun add base-sc-vue-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-30 |
| First published | 2021-06-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhangh |
| Maintainers | zhangh-design |
| Keywords | element-ui, templete, vue |

## Links

- npm: https://www.npmjs.com/package/base-sc-vue-ui
- Homepage: https://gitee.com/zhangh-design/rollup-ui-frame
- npm.io page: https://npm.io/package/base-sc-vue-ui

## Recent versions

- 1.0.0 (latest) — 2021-06-30
- 0.1.0 — 2021-06-29

## README

##  shuCView

<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-v2.6.11-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.13.1-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/cdnjs-v0.1.0-blue.svg" alt="vue">
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/npm-v0.1.0-blue.svg" alt="vue">
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/gzip--size: JS-82.57 KB-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/gzip--size: CSS-15 KB-brightgreen.svg" alt="vue">
  </a>
</p>

**特别感谢 `zenkle` 小伙伴为我们的UI组件库提供了一个非常棒的名字`shuCView`。**

使用`element-ui`为基础库二次封装了例如：Grid 带分页的数据列表、Form可配置表单和selectTree下拉树组件等高阶组件。

使用示例和文档说明：
[->正在加紧编写]()

安装和快速上手

#### npm 安装

> 安装依赖包

- vue

```
npm i vue2.6.11 --save
```

- element-ui

```
npm i element-ui@2.13.1 --save
```

- base-sc-vue-ui （二次扩展库插件）

```
npm i base-sc-vue-ui --save
```

- axios-api-query （ajax请求插件）

```
npm i axios-api-query --save
```

- lodash （帮助函数插件）

`lodash`如果使用的是脚手架那么可能脚手架已经帮你安装了（比如：Vue CLI）。

```
npm i lodash --save
```

- sortablejs （html元素节点拖动）

```
npm i sortablejs --save
```

- dayjs （时间处理）

```
npm i dayjs --save
```

#### CDN

cdn 服务网络js文件暂未发布，如果需要使用请至目录：

```
node_modules
└──base-sc-vue-ui
    lib
    └──iife
        └──base-sc-ui.js
        └──theme-default
            └──index.css
```

将`base-sc-ui.js`和默认主题样式文件`index.css`拷贝到你项目中的 static 目录内，然后使用：
```
<script src="/static/base-sc-ui.js"></script>
<link rel="stylesheet" href="/static/theme-default/index.css"/>
```

main.js （webpack中使用）

```
import Vue from 'vue';
new Vue({
  created() {
    window.BaseScVueUI.default.install(Vue);
  },	
  render: h => h(App)
}).$mount('#app')
```

如果 `Vue` 是通过CDN的形式载入，
```
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
则插件会自动进行组件的注册和初始化。

---

#### 快速上手

> 本节将介绍如何在项目中使用 base-sc-vue-ui。

- **完整引入**

> 在 main.js 中写入以下内容：

```
import Vue from 'vue';
// 完整引入 element-ui 库和样式文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入 base-sc-vue-ui 插件和样式文件
import BaseScVueUI from 'base-sc-vue-ui';
import 'base-sc-vue-ui/lib/cjs/theme-default/index.css';
import App from './App.vue';

// 使用
Vue.use(BaseScVueUI)
Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

注意：以上代码便完成了 ElementUI 和 base-sc-vue-ui 的引入。

需要注意的是，完整引入的方式样式文件需要单独引入。


- **按需引入**

注意：按需引入不支持 `<script>` 标签的形式，使用按需引入时可以将 elementUi 也进行按需引入或者 elementUi不使用按需引入只将 BaseScVueUI 进行按需引入。

1. ElementUI

[->elementUi按需引入请看官方介绍](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)

2. BaseScVueUI

import 引入目录中需要引入的组件文件：

```
node_modules
└──base-sc-vue-ui
    └──lib
       └──cjs
          └──select
          |    └──index.js
          └──grid
          |    └──index.js
          └── ...
          └──theme-default
              └──select.css
              └──grid.less
              └──...
```

main.js

```
import {BaseSelect} from '@node_modules/base-sc-vue-ui/lib/cjs/select/index.js';
import {BaseGrid} from '@node_modules/base-sc-vue-ui/lib/cjs/grid/index.js';
import 'base-sc-vue-ui/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. 

[zenkle](https://github.com/zenkle)、[Dalydai](https://github.com/Dalydai)

---
_Source: https://npm.io/package/base-sc-vue-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._