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/>'
})