基于 ElementUI 重构UI指南

未分类

1. 自定义 ElementUI 皮肤
   根据官网指导操作即可

2. 按需引入组件
   新增文件 element.config.js, 内容如下, 只引入需要的组件到项目中, 然后在项目入口页面 import '../lib/element.config.js';

   import Vue from 'vue';
   // import '../../ele-theme-owo/index.css';
   import {
       Pagination,
       // Dialog,
       // Autocomplete,
       // Dropdown,
       // DropdownMenu,
       // DropdownItem,
       Menu,
       Submenu,
       MenuItem,
       MenuItemGroup,
       Input,
       InputNumber,
       Radio,
       RadioGroup,
       RadioButton,
       Checkbox,
       CheckboxGroup,
       Switch,
       Select,
       Option,
       OptionGroup,
       Button,
       ButtonGroup,
       Table,
       TableColumn,
       // DatePicker,
       // TimeSelect,
       // TimePicker,
       // Popover,
       // Tooltip,
       // Breadcrumb,
       // BreadcrumbItem,
       Form,
       FormItem,
       // Tabs,
       // TabPane,
       // Tag,
       // Tree,
       // Alert,
       // Slider,
       Icon,
       Row,
       Col,
       // Upload,
       // Progress,
       // Spinner,
       // Badge,
       // Card,
       // Rate,
       // Steps,
       // Step,
       // Carousel,
       // Scrollbar,
       // CarouselItem,
       // Collapse,
       // CollapseItem,
       // Cascader,
       // ColorPicker,
       // Loading,
       MessageBox,
       Message,
       Notification
   } from 'element-ui';
   Vue.use(Pagination);
   // Vue.use(Dialog);
   // Vue.use(Autocomplete);
   // Vue.use(Dropdown);
   // Vue.use(DropdownMenu);
   // Vue.use(DropdownItem);
   Vue.use(Menu);
   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(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(TabPane);
   // Vue.use(Tag);
   // Vue.use(Tree);
   // Vue.use(Alert);
   // Vue.use(Slider);
   Vue.use(Icon);
   Vue.use(Row);
   Vue.use(Col);
   // Vue.use(Upload);
   // Vue.use(Progress);
   // Vue.use(Spinner);
   // Vue.use(Badge);
   // Vue.use(Card);
   // Vue.use(Rate);
   // Vue.use(Steps);
   // Vue.use(Step);
   // Vue.use(Carousel);
   // Vue.use(Scrollbar);
   // Vue.use(CarouselItem);
   // Vue.use(Collapse);
   // Vue.use(CollapseItem);
   // Vue.use(Cascader);
   // Vue.use(ColorPicker);
   // Vue.use(Loading.directive);
   // Vue.prototype.$loading = Loading.service;
       Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
       Vue.prototype.$confirm = MessageBox.confirm;
   Vue.prototype.$prompt = MessageBox.prompt;
       Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;

3. 列表页面
   列表页面使用 Table 组件展示数据, 参考示例: 商品列表, Live Demo

4. 表单页面
   表单页面使用 Form 组件布局, 使用element 表单组件代替web 表单元素, 参考示例: 商品编辑, Live Demo