1.0.5 • Published 4 years ago

@kuyun/ku-element-ui v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

ku-element-ui

安装

npm i @kuyun/ku-element-ui --save

or

yarn add @kuyun/ku-element-ui

使用

ElementUI 全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 自定义主题参考 element-ui 官网
import 'ku-element-ui/lib/ku-element-ui.css'

ElementUI 按需引入(推荐)

Notice:项目组件依赖的 element-ui 的组件列表:Tooltip,须按需引入。

安装插件

npm i babel-plugin-component -D

修改配置(.babelrc 或 babel.config.js)

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

引入部分组件

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

引入 ku-element-ui 组件库组件

import { KuViewTypeSwitch } from 'ku-element-ui';

自定义主题

element ui 自定义主题参考官网

ku-element-ui 自定义主题

新建 custom.scss,内容如下:

$themeColor: green; // 可替换的变量,所有变量可参考 ku-element-ui/packages/styles/varibles.scss
@import 'ku-element-ui/packages/styles/index.scss';

然后在 main.js 中引入 custom.scss即可

组件展示

example

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago