shuCView

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

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

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

安装和快速上手

npm 安装

安装依赖包

• vue

npm i vue2.6.11 --save

• element-ui

npm i [email protected] --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按需引入请看官方介绍

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.

| IE / Edge | Firefox | Chrome | Safari | 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、Dalydai