kis-ui

kis-ui

kis-ui 是面向 PC 端的组件库，基于 Vue 3.0 实现，二次封装 element-plus ，支持所有现代浏览器。

特点

• 丰富且优质的 Vue 组件
• 扩展 element-plus 组件，功能更全面

安装

npm install kis-ui --save

引入

全量引入

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

import { createApp } from "vue";
import App from './App.vue';

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import KisUI from 'kis-ui'
import 'kis-ui/lib/style/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.use(KisUI);
app.mount("#app");

以上代码便完成了 Element Plus 以及 KisUI 的引入。需要注意的是，样式文件需要单独引入。

按需引入

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

import { createApp } from "vue";
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import 'kis-ui/lib/style/index.css';

import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");

在需要使用组件的文件中写入以下内容：

<script>
  import { defineComponent, ref } from 'vue'
  import { KisTable } from 'kis-ui'
  export default defineComponent ({
    components: {
      KisTable
    },
    setup () {
      return {}
    }
  })
</script>

自定义主题

KisUI 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。

定制方法

步骤一 引入样式源文件

定制主题时，需要引入组件对应的 Less 样式文件

// 引入全部样式
import 'kis-ui/theme-chalk/index.less';

// 引入单个组件样式
import 'kis-ui/theme-chalk/button';
import 'kis-ui/theme-chalk/icon';

步骤二 修改样式变量

使用 Less 提供的 modifyVars 即可对变量进行修改，下面是 vue.config.js 的配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      less: {
        // 若 less-loader 版本 < 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          javascriptEnabled: true,  // 开启样式内编辑 JavaScript
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'shell-dark-header-background-color': '#f0f',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${resolve('src/assets/styles/varReset.less')}";`,
          },
        },
      },
    },
  }
}