Lemon-ui

组件库目录

组件库文档

文档地址

组件

• [X] Button
• [X] 标题框
• [X] 边框
• [X] 加载组件

gitlab仓库

Lemon-ui 仓库地址

npm

版本管理

  "name": "Lemon-ui",
  "version": "1.0.1", 
  "description": "可视化大屏UI库",
  "main": "lib/index.js",

安装

通过npm安装

npm i lemon-ui-vue2 -S

通过yarn安装

yarn add lemon-ui-vue2 -S

快速开始

引入Lemon-ui

你可以引入整个Lemon-ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Lemon-ui。

完整引入

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

import Vue from 'vue';
import LemonUI from 'lemon-ui-vue2';
import 'lemon-ui-vue2/lib/lemonui.css';
import App from './App.vue';

Vue.use(LemonUI);

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

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将babel.config.js修改为

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['component',
    {
      libraryName:'lemon-ui-vue2',
      libDir:'lib/packages',
      camel2Dash:true
    },
  ],
],
}

接下来，如果你只希望引入部分组件，比如 BorderBox1 和 TitleBox1,那么需要在 main.js 中写入以下内容：

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

Vue.component(BorderBox1.name, BorderBox1);
Vue.component(TitleBox1.name, TitleBox1);
/* 或写为
 * Vue.use(BorderBox1)
 * Vue.use(TitleBox1)
 */

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