Jellies

This project is a UI toolkit based on ElementUI (v2.15.8). A full documentation will come out in a later version and if you would like to use it now you may refer to a Chinese version of temporary documentation.

Note

The visual design is going to shift piece by piece since v2.0.0 and currently it is still in alpha phase.

If you prefer a stable visual system, you can stay with v1.x.

How to use

Install the Jellies via NPM.

npm install --save jellies

Import it to your project. And use it accordingly on your Vue instance.

Import completely at once

If you only would like to try Jellies you may import it completely. However, it is not recommended for production since the whole package is quite large.

import Jellies from "jellies";

// Some code related to Vue...

Vue.use(Jellies);

On demand import

With the help of babel-plugin-component, we can import components we actually need, making our project smaller than otherwise.

First, install babel-plugin-component:

npm install babel-plugin-component -D

Then edit .babelrc:

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "jellies",
        "libDir": "src/components",
        "styleLibraryName": "theme"
      }
    ]
  ]
}

Next, import the shared base once (it carries the global, non-per-component styles), then the components you need. Edit main.js:

import Vue from "vue";
// Import the shared base ONCE: element reset + transitions + the icon system (element icon glyphs,
// the jellies-icons @font-face, `el-icon-j-*`, and element-icon replacements). On-demand ships only
// per-component CSS, so WITHOUT this base, reset/transitions and every icon glyph would be missing.
import "jellies/src/components/theme/base.css";
import { Button, Select } from "jellies";
import App from "./App.vue";

Vue.use(Button);
Vue.use(Select);

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

base.css is required for on-demand. It is the on-demand counterpart of the Vue.use(Jellies) global import, which loads these same shared assets automatically. Skipping it leaves el-icon-j-* (and replaced element icons) blank and drops the base reset/transitions.

Global (Vue.use(Jellies)) note: jellies' SCSS uses ~element-ui import paths, so the global path requires a bundler that resolves ~ in SCSS (webpack + sass-loader, or a Vite ~ alias). The pre-compiled base.css needs no ~-in-SCSS handling, but it still contains one ~element-ui font URL (element's icon webfont) that css-loader must resolve — same as the per-component CSS.

Full example

import Vue from "vue";

import {
  Pagination,
  Dialog,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  Tag,
  Tree,
  Alert,
  Slider,
  Row,
  Col,
  Upload,
  Progress,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Container,
  Header,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Backtop,
  Panel,
  Loading,
  Message,
  Notification,
  Calendar
} from "jellies";

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Container);
Vue.use(Header);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Backtop);
Vue.use(Panel);
Vue.use(Calendar);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

Then you are able to use the functionality of Jellies in your project.

For Developer

Solve Dependency

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build