1.0.5 • Published 4 years ago
@kuyun/ku-element-ui v1.0.5
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即可