Gos-ui NPM | npm.io

A UI Component Library for Vue3.0 based on TypeScript.

Install

npm install gos-ui -S

Quick Start

// Global introduction
import { createApp } from 'vue'
import GosUi from 'gos-ui';
import 'gos-ui/lib/theme/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(GosUi)
app.mount('#app')

Use some components

import { createApp } from 'vue'
import { GosButton, GosSelect } from 'gos-ui';
import App from './App.vue';
// If you want to use the .scss style file, you need to import the base.scss file.
// import 'gos-ui/packages/theme/src/base.scss'

const app = createApp(App)
app.component(GosButton.name, GosButton);
app.component(GosSelect.name, GosSelect);

/* or
 * app.use(GosButton)
 * app.use(GosSelect)
 */

app.mount('#app')

Use all components

import { createApp } from 'vue'
import App from './App.vue';
// If you want to use the .scss style file, you need to import the base.scss file.
// import 'gos-ui/packages/theme/src/base.scss'

import {
  GosAlert,
  GosAside,
  GosAutocomplete,
  GosAvatar,
  GosBacktop,
  GosBadge,
  GosBreadcrumb,
  GosBreadcrumbItem,
  GosButton,
  GosButtonGroup,
  GosCalendar,
  GosCard,
  GosCarousel,
  GosCarouselItem,
  GosCascader,
  GosCascaderPanel,
  GosCheckbox,
  GosCheckboxButton,
  GosCheckboxGroup,
  GosCol,
  GosCollapse,
  GosCollapseItem,
  GosCollapseTransition,
  GosColorPicker,
  GosContainer,
  GosDatePicker,
  GosDialog,
  GosDivider,
  GosDrawer,
  GosDropdown,
  GosDropdownItem,
  GosDropdownMenu,
  GosFooter,
  GosForm,
  GosFormItem,
  GosHeader,
  GosIcon,
  GosImage,
  GosInput,
  GosInputNumber,
  GosLink,
  GosMain,
  GosMenu,
  GosMenuItem,
  GosMenuItemGroup,
  GosOption,
  GosOptionGroup,
  GosPageHeader,
  GosPagination,
  GosPopconfirm,
  GosPopover,
  GosPopper,
  GosProgress,
  GosRadio,
  GosRadioButton,
  GosRadioGroup,
  GosRate,
  GosRow,
  GosScrollbar,
  GosSelect,
  GosSlider,
  GosStep,
  GosSteps,
  GosSubmenu,
  GosSwitch,
  GosTabPane,
  GosTable,
  GosTableColumn,
  GosTabs,
  GosTag,
  GosTimePicker,
  GosTimeSelect,
  GosTimeline,
  GosTimelineItem,
  GosTooltip,
  GosTransfer,
  GosTree,
  GosUpload,
  GosInfiniteScroll,
  GosLoading,
  GosMessage,
  GosMessageBox,
  GosNotification,
} from 'gos-ui';

const components = [
  GosAlert,
  GosAside,
  GosAutocomplete,
  GosAvatar,
  GosBacktop,
  GosBadge,
  GosBreadcrumb,
  GosBreadcrumbItem,
  GosButton,
  GosButtonGroup,
  GosCalendar,
  GosCard,
  GosCarousel,
  GosCarouselItem,
  GosCascader,
  GosCascaderPanel,
  GosCheckbox,
  GosCheckboxButton,
  GosCheckboxGroup,
  GosCol,
  GosCollapse,
  GosCollapseItem,
  GosCollapseTransition,
  GosColorPicker,
  GosContainer,
  GosDatePicker,
  GosDialog,
  GosDivider,
  GosDrawer,
  GosDropdown,
  GosDropdownItem,
  GosDropdownMenu,
  GosFooter,
  GosForm,
  GosFormItem,
  GosHeader,
  GosIcon,
  GosImage,
  GosInput,
  GosInputNumber,
  GosLink,
  GosMain,
  GosMenu,
  GosMenuItem,
  GosMenuItemGroup,
  GosOption,
  GosOptionGroup,
  GosPageHeader,
  GosPagination,
  GosPopconfirm,
  GosPopover,
  GosPopper,
  GosProgress,
  GosRadio,
  GosRadioButton,
  GosRadioGroup,
  GosRate,
  GosRow,
  GosScrollbar,
  GosSelect,
  GosSlider,
  GosStep,
  GosSteps,
  GosSubmenu,
  GosSwitch,
  GosTabPane,
  GosTable,
  GosTableColumn,
  GosTabs,
  GosTag,
  GosTimePicker,
  GosTimeSelect,
  GosTimeline,
  GosTimelineItem,
  GosTooltip,
  GosTransfer,
  GosTree,
  GosUpload,
]

const plugins = [
  GosInfiniteScroll,
  GosLoading,
  GosMessage,
  GosMessageBox,
  GosNotification,
]

const app = createApp(App)

components.forEach(component => {
  app.component(component.name, component)
})

plugins.forEach(plugin => {
  app.use(plugin)
})