安装

安装 polyv-ui

npm install @polyv/polyv-ui -S

按需引入

按需引入需要借助 babel-plugin-import (opens new window) 已达到减少项目构建后的体积。

第一步，安装 babel-plugin-import：

npm install babel-plugin-import -D

第二步，配置 babel.config.js 或 .babelrc：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '@polyv/polyv-ui',
        libraryDirectory: 'lib-admin',
        styleLibraryDirectory: 'lib-admin/theme',
      }
    ],
  ]
};

第三步，如果您的项目是使用 Webpack 的构建工具，需要在 extensions 中添加 .css：

module.exports = {
  resolve: {
    extensions: ['.css'],
  },
};

第四步，项目中按需引入，如 Button 和 Select：

import Vue from 'vue';
import { Button, Select } from '@polyv/polyv-ui';

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

完整的组件列表引入：

import Vue from 'vue';
import {
  // Style
  Iconfont,
  ScrollStyle,
  Transition,
  CollapseTransition,
  BreakpointDiv,

  // Components
  AreaPicker,
  Aside,
  Button,
  Breadcrumb,
  BreadcrumbItem,
  CellSelect,
  CellSelectItem,
  Checkbox,
  CheckboxGroup,
  ColorCell,
  ColorPicker,
  Column,
  ColumnItem,
  Confirm,
  Container,
  DatePicker,
  Dialog,
  Dot,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Editor,
  Form,
  FormItem,
  Header,
  Icon,
  ImgCropper,
  ImgPreview,
  ImgUpload,
  Input,
  InputNumber,
  InputUrl,
  Loading,
  Logo,
  Main,
  MenuGroupV3,
  MenuItemV3,
  MenuV3,
  NoticeBar,
  Pagination,
  Popper,
  Prompt,
  Radio,
  RadioGroup,
  ScrollBar,
  Select,
  SelectOption,
  Slider,
  Switch,
  TabPanel,
  Table,
  TableColumn,
  TableFilter,
  TableFilterItem,
  Tabs,
  Tag,
  Textarea,
  TimePicker,
  Tips,
  Toast,
  Tooltip,
  Tree,

  // Directives
  ClickOutSide,
  Clipboard,
  ClickRepeat,
  TitleTip,
} from '@polyv/polyv-ui';


Vue.use(Iconfont);
Vue.use(ScrollStyle);
Vue.use(Transition);
Vue.use(CollapseTransition);
Vue.use(BreakpointDiv);

Vue.use(AreaPicker);
Vue.use(Aside);
Vue.use(Button);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(CellSelect);
Vue.use(CellSelectItem);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(ColorCell);
Vue.use(ColorPicker);
Vue.use(Column);
Vue.use(ColumnItem);
Vue.use(Confirm);
Vue.use(Container);
Vue.use(DatePicker);
Vue.use(Dialog);
Vue.use(Dot);
Vue.use(Dropdown);
Vue.use(DropdownItem);
Vue.use(DropdownMenu);
Vue.use(Editor);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Header);
Vue.use(Icon);
Vue.use(ImgCropper);
Vue.use(ImgPreview);
Vue.use(ImgUpload);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(InputUrl);
Vue.use(Loading);
Vue.use(Logo);
Vue.use(Main);
Vue.use(MenuGroupV3);
Vue.use(MenuItemV3);
Vue.use(MenuV3);
Vue.use(NoticeBar);
Vue.use(Pagination);
Vue.use(Popper);
Vue.use(Prompt);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(ScrollBar);
Vue.use(Select);
Vue.use(SelectOption);
Vue.use(Slider);
Vue.use(Switch);
Vue.use(TabPanel);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(TableFilter);
Vue.use(TableFilterItem);
Vue.use(Tabs);
Vue.use(Tag);
Vue.use(Textarea);
Vue.use(TimePicker);
Vue.use(Tips);
Vue.use(Toast);
Vue.use(Tooltip);
Vue.use(Tree);

Vue.use(ClickOutSide);
Vue.use(Clipboard);
Vue.use(ClickRepeat);
Vue.use(TitleTip);