Shu-c-view NPM

shuCView

注意： 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 安装

安装依赖包

npm i vue2.6.13 --save

element-ui

npm i element-ui@2.15.12 --save

shuCView （elementUI 二次扩展库插件）

npm i shu-c-view --save

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

npm i axios-api-query --save

shu-c-data-dict（全局数据字典）用于 grid 组件列配置的 filter 属性，转换列数据使用，比如：128 -> 启用

npm i shu-c-data-dict --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
└──shu-c-view
    lib
    └──iife
        └──shu-c-view.js
        └──theme-default
            └──index.css

将shu-c-view.js和默认主题样式文件index.css拷贝到你项目中的 static 目录内，然后使用：

<script src="/static/shu-c-view.js"></script>
<link rel="stylesheet" href="/static/theme-default/index.css"/>

main.js （webpack中使用）

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

如果 Vue 是通过CDN的形式载入，

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

则插件会自动进行组件的注册和初始化。

快速上手

本节将介绍如何在项目中使用 shu-c-view。

完整引入

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

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 进行按需引入。

ElementUI

->elementUi按需引入请看官方介绍

shuCView

import 引入需要引入的组件文件：

node_modules
└──shu-c-view
    └──lib
       └──cjs
          └──select
          |    └──index.js
          └──grid
          |    └──index.js
          └── ...
          └──theme-default
              └──select.css
              └──grid.less
              └──...

main.js

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);