如何扩展element-ui应用项目

Github地址被我删除了，不记得这里文章有引用了，有需要的话可联系，在上传一份到github

项目中可能会遇到需要扩展已经用到的前端框架，并且想在其文档中维护项目开发中新添加的组件。这里以element-ui扩展一个之前写的日历组件，并且应用到项目中使用。

doc维护页面

先看一下添加vue日历组件之后在页面的添加的日历组件展示。

扩展element-ui步骤

首先fork github项目

如下图，红色提交为本地扩展之后的提交，https://github.com/rodchen-king/element/commits/dev

修改doc左侧菜单 examples/nav.config.json

{
  "groupName": "自定义组件",
  "list": [
    {
      "path": "/calendar",
      "title": "日历"
    }
  ]
}

添加对应组件（日历）使用介绍 examples/docs/zh-CN/calendar.md

### 基本用法

日历基本使用。

:::demo
```html
<template>
  <vue-calendar />
</template>
```
:::


日历以周日开始第一天。
:::demo
```html
<template>
  <vue-calendar :week-label-index="0" />
</template>
```

:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| week-label-index     | 日历是否从周一开始          | string | 0（周日）/1（周一）/2（周二）/3（周三）/4（周四）/5（周五）/6（周六） | 1 |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| dayClick | 点击日历事件 | — |

添加对应日历源文件 

修改src./index.js，添加vue-calendar src/index.js

/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';
import DropdownMenu from '../packages/dropdown-menu/index.js';
import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js';
import MenuItemGroup from '../packages/menu-item-group/index.js';
import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js';
import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js';
import CheckboxButton from '../packages/checkbox-button/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js';
import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js';
import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js';
import Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
import Badge from '../packages/badge/index.js';
import Card from '../packages/card/index.js';
import Rate from '../packages/rate/index.js';
import Steps from '../packages/steps/index.js';
import Step from '../packages/step/index.js';
import Carousel from '../packages/carousel/index.js';
import Scrollbar from '../packages/scrollbar/index.js';
import CarouselItem from '../packages/carousel-item/index.js';
import Collapse from '../packages/collapse/index.js';
import CollapseItem from '../packages/collapse-item/index.js';
import Cascader from '../packages/cascader/index.js';
import ColorPicker from '../packages/color-picker/index.js';
import Transfer from '../packages/transfer/index.js';
import Container from '../packages/container/index.js';
import Header from '../packages/header/index.js';
import Aside from '../packages/aside/index.js';
import Main from '../packages/main/index.js';
import Footer from '../packages/footer/index.js';
import Timeline from '../packages/timeline/index.js';
import TimelineItem from '../packages/timeline-item/index.js';
import VueCalendar from '../packages/vue-calendar/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  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,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  VueCalendar,
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

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

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  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;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '2.5.4',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  MessageBox,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Notification,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Message,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  VueCalendar
};

修改打包config （/components.json） components.json

{
  "pagination": "./packages/pagination/index.js",
  "dialog": "./packages/dialog/index.js",
  "autocomplete": "./packages/autocomplete/index.js",
  "dropdown": "./packages/dropdown/index.js",
  "dropdown-menu": "./packages/dropdown-menu/index.js",
  "dropdown-item": "./packages/dropdown-item/index.js",
  "menu": "./packages/menu/index.js",
  "submenu": "./packages/submenu/index.js",
  "menu-item": "./packages/menu-item/index.js",
  "menu-item-group": "./packages/menu-item-group/index.js",
  "input": "./packages/input/index.js",
  "input-number": "./packages/input-number/index.js",
  "radio": "./packages/radio/index.js",
  "radio-group": "./packages/radio-group/index.js",
  "radio-button": "./packages/radio-button/index.js",
  "checkbox": "./packages/checkbox/index.js",
  "checkbox-button": "./packages/checkbox-button/index.js",
  "checkbox-group": "./packages/checkbox-group/index.js",
  "switch": "./packages/switch/index.js",
  "select": "./packages/select/index.js",
  "option": "./packages/option/index.js",
  "option-group": "./packages/option-group/index.js",
  "button": "./packages/button/index.js",
  "button-group": "./packages/button-group/index.js",
  "table": "./packages/table/index.js",
  "table-column": "./packages/table-column/index.js",
  "date-picker": "./packages/date-picker/index.js",
  "time-select": "./packages/time-select/index.js",
  "time-picker": "./packages/time-picker/index.js",
  "popover": "./packages/popover/index.js",
  "tooltip": "./packages/tooltip/index.js",
  "message-box": "./packages/message-box/index.js",
  "breadcrumb": "./packages/breadcrumb/index.js",
  "breadcrumb-item": "./packages/breadcrumb-item/index.js",
  "form": "./packages/form/index.js",
  "form-item": "./packages/form-item/index.js",
  "tabs": "./packages/tabs/index.js",
  "tab-pane": "./packages/tab-pane/index.js",
  "tag": "./packages/tag/index.js",
  "tree": "./packages/tree/index.js",
  "alert": "./packages/alert/index.js",
  "notification": "./packages/notification/index.js",
  "slider": "./packages/slider/index.js",
  "loading": "./packages/loading/index.js",
  "icon": "./packages/icon/index.js",
  "row": "./packages/row/index.js",
  "col": "./packages/col/index.js",
  "upload": "./packages/upload/index.js",
  "progress": "./packages/progress/index.js",
  "spinner": "./packages/spinner/index.js",
  "message": "./packages/message/index.js",
  "badge": "./packages/badge/index.js",
  "card": "./packages/card/index.js",
  "rate": "./packages/rate/index.js",
  "steps": "./packages/steps/index.js",
  "step": "./packages/step/index.js",
  "carousel": "./packages/carousel/index.js",
  "scrollbar": "./packages/scrollbar/index.js",
  "carousel-item": "./packages/carousel-item/index.js",
  "collapse": "./packages/collapse/index.js",
  "collapse-item": "./packages/collapse-item/index.js",
  "cascader": "./packages/cascader/index.js",
  "color-picker": "./packages/color-picker/index.js",
  "transfer": "./packages/transfer/index.js",
  "container": "./packages/container/index.js",
  "header": "./packages/header/index.js",
  "aside": "./packages/aside/index.js",
  "main": "./packages/main/index.js",
  "footer": "./packages/footer/index.js",
  "timeline": "./packages/timeline/index.js",
  "timeline-item": "./packages/timeline-item/index.js",
  "vue-calendar": "./packages/vue-calendar/index.js"
}

命令

启动项目命令，默认端口8085

npm run dev

打lib包命令

npm run dist

执行命令之后可以看到项目中多了lib文件夹，如图。右侧index.js为压缩之后的js文件，当然还有css文件（element\lib\theme-chalk\index.css）

应用lib包到现有项目中去

这里拿之前写的日历进行示例。https://github.com/rodchen-king/vue-calendar

添加lib文件夹，命名为element-ui

项目引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入扩展后的element-ui和css
import ElementUI from '../element-ui/lib/index.js'
import '../element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})